将HTML字符串附加到DOM

Question

如何附加这个HTML字符串var str = '<p>Just some <span>text</span> here</p>';到具有'test'DOM中ID的DIV ？（顺便说一句div.innerHTML += str;是不可接受的。）

Answer 1

这可以接受吗？

var child = document.createElement('div');

child.innerHTML = str;

child = child.firstChild;

document.getElementById('test').appendChild(child);

jsFiddle。

但是，尼尔的答案是一个更好的解决方案。

Answer 2

这个想法是innerHTML在中间元素上使用，然后将其所有子节点移动到您真正想要的子节点appendChild。

var target = document.getElementById('test');

var str = '<p>Just some <span>text</span> here</p>';

var temp = document.createElement('div');

temp.innerHTML = str;

while (temp.firstChild) {

  target.appendChild(temp.firstChild);

}

这样可以避免清除所有事件处理程序，div#test但仍允许您附加HTML字符串。