document.body.innerHTML + = htmlstring的替代方案

Question

我有一个执行此操作的功能：

document.body.innerHTML += '<div>lorem ipsum</div>';

它工作正常，但它打破了我对其他div的引用（我读过这是因为它再次解析了身体）。有没有只使用Javascript的香草替代品？

Answer 1

我可以通过两种方式看到

document.body.appendChild(document.createElement('div')).app‌​endChild(document.cr‌​eateTextNode('lorem ipsum'))

这只是

的简写

var div = document.createElement('div');
var text = document.createTextNode('lorem ipsum');
div.appendChild(text);
document.body.appendChild('div');

或

document.body.insertAdjacentHTML('beforeEnd', '<div>lorem ipsum</div>');

文档：

• document.createElement
• document.createTextNode
• Node.appendChild
• Element.insertAdjacentHTML

Answer 2

你可以追加另一个div

document.getElementById("demoDiv").innerHTML += '<div>Test 22</div>';

<div>Test</div>
<div id="demoDiv"></div>