的insertBefore不起作用

Question

我使用此代碼嘗試其他元素之前增加新的內容：

var form = document.getElementsByClassName('commentresponse')[0], 
    newcomment = '<div><span></span><span><p class="author">'+author+'</p><p class="content">'+comment+'</p></span></div>' ; 
form.insertBefore(newcomment, form); 

的2個瓦爾正常工作並返回我的期望。但鉻給我這個錯誤：Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

不知何故insertBefore行阻止代碼。我究竟做錯了什麼？

感謝您的幫助！

Answer 1

insertBefore需要一個DOM節點，而不是HTML。

而是執行此操作：

var form = document.getElementsByClassName('commentresponse')[0], 
    newcomment = document.createElement('div'); 
newcomment.innerHTML = '<span></span><span><p class="author">'+author+'</p><p class="content">'+comment+'</p></span>'; 
form.parentNode.insertBefore(newcomment, form); 

你會想要逃避author和comment，作爲包含'<'，'>'，並'&'會搞砸了弦。

爲了完整起見，這裏是你如何能完全與DOM節點做到這一點（不使用innerHTML - 雖然做這樣的事情似乎是現代網絡上丟失的藝術）：

var form = document.getElementsByClassName('commentresponse')[0], 
    newcomment = document.createElement('div'), 
    el, el2; 
newcomment.appendChild(document.creatElement('span')); 
el = document.createElement('span'); 
el2 = document.createElement('p'); 
el2.className = 'author'; 
el2.appendChild(document.createTextNode(author)); 
el.appendChild(el2); 
el2 = document.createElement('p'); 
el2.className = 'content'; 
el2.appendChild(document.createTextNode(content)); 
el.appendChild(el2); 
newcomment.appendChild(el); 
form.parentNode.insertBefore(el, form); 

這種方式沒有按」 t需要被轉義，因爲author和content被明確地添加爲文本節點。