0

我正在使用此代码尝试在另一个元素之前添加新内容：

 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 vars 工作正常并返回我所期望的。但是 Chrome 给了我这个错误：Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

不知何故， insertBefore 行阻塞了代码。我究竟做错了什么？

谢谢你们的帮助！

4

1 回答 1

2

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);

您将希望将authorand转义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);

这种方式不需要转义，因为author和content被显式添加为文本节点。

于 2012-09-18T03:36:58.070 回答