如何使用 innerHTML 附加到对象答案

【问题标题】：how to append to a object with innerHTML如何使用 innerHTML 附加到对象
【发布时间】：2016-03-17 22:14:32
【问题描述】：

有没有办法用 .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>

【问题讨论】：

回答：stackoverflow.com/questions/1387433/…

标签： javascript

【解决方案1】：

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

【讨论】：

这给了我一个 ERROR TypeError: "document.getElementById(...) is null" 在打字稿中使用时

【解决方案2】：

+= operator。

【讨论】：

【解决方案3】：

你可以使用Element.insertAdjacentHTML()。

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

如果你想在这个Element 的末尾附加你的stuff，你会这样做

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

【讨论】：

这太棒了！非常感谢。

【解决方案4】：

为什么不试试

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

注意“+”

【讨论】：

这将删除所有附加到 div 内现有元素的事件

【解决方案5】：

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

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

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

【讨论】：

+1 用于识别 OP 源中存在错误。

【解决方案6】：

改成这样：

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

ol' x = x+1 连接方式。

虽然我不认为“document.getElementById.innerHTML('div')”是正确的语法？你不是说“document.getElementById('divid').innerHTML”吗？

【讨论】：

【解决方案7】：

也许：

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

【讨论】：