如何使用innerHTML附加到对象

Question

有没有办法用.innerHTML向DOM对象添加信息而不替换那里存在的东西？

例如: document.getElementById('div').innerHTML = 'stuff';

会回来 <div id="div">stuff</div>

然后是一个类似的电话: document.getElementById('div').innerHTML = ' and things';

将div设置为 <div id="div">stuff and things</div>

Answer 1

document.getElementById('mydiv').innerHTML = 'stuff'
document.getElementById('mydiv').innerHTML += 'and things'
document.getElementById('mydiv').innerHTML += 'and even more'

Answer 2

你可以使用Element.insertAdjacentHTML().

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析正在使用的元素，因此不会破坏元素内的现有元素。这样，并且避免了额外的序列化步骤，使其比直接的innerHTML操作要快得多。

如果你想stuff在最后添加你的Element，你会这样做

const div = document.getElementById("div");
div.insertAdjacentHTML('beforeend', 'stuff');;