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个vars工作正常并返回我的期望。但Chrome会向我显示此错误：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);

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

insertBefore不起作用

1 个答案: