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

这两个变量工作正常并返回我所期望的结果。但是 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明确添加为文本节点。