如何使用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

+ =运算符 。

Answer 3

您可以使用Element.insertAdjacentHTML() 。

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

如果您想在此Element的末尾添加stuff ，则可以

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

Answer 4

为什么不尝试

document.getElementById('div').innerHTML += ' and things';

注意“ +”

Answer 5

您的示例中有错误。 但是您可以这样做：

var myDiv = document.getElementById('div');

myDiv.innerHTML = myDiv.innerHTML + ' and things';

Answer 6

更改为此：

document.getElementById.innerHTML('div') = 
    document.getElementById.innerHTML('div') + ' and things';

ol'x = x + 1级联样式。

尽管我认为“ document.getElementById.innerHTML（'div'）”甚至不是正确的语法？ 您不是说“ document.getElementById（'divid'）。innerHTML”吗？

Answer 7

也许：

document.getElementById('div').innerHTML = document.getElementById('div').innerHTML + ' and things'