如何追加到innerHTML而不是替换其内容

Question

我知道我们可以更改的内容，例如，

<div id="whatEverId">hello one<div>

通过使用：

document.getElementById("whatEverId").innerHTML="hello two";

有没有办法（使用

.innerHTML()

）我可以向 div 添加内容而不是替换它？所以我可以得到，例如，

<div id="whatEverId">hello one hello two<div>

Answer 1

使用

+=

赋值运算符:

<div id="whatever">hello one</div>
<script>
document.getElementById("whatever").innerHTML += " hello two";
</script>

Answer 2

请注意，使用

element.innerHTML += 'content'

会将

input

和

textarea

清空至默认的空白状态，取消单击复选框，并删除附加到这些元素的任何事件（例如

onclick

、

on hover

等）。 ）因为整个

innerHTML

会被浏览器重新解释，这意味着

.innerHTML

被清空并再次从头开始填充合并的内容。

如果需要保留状态，则需要创建一个新元素（例如

<span>

）并将其附加到当前元素，如下所示：

let newElement = 'span'
newElement.innerHTML = 'new text'
document.getElementById('oldElement').appendChild(newElement)

Answer 3

document.getElementById("whatEverId").innerHTML =  document.getElementById("whatEverId").innerHTML +  "hello two" + document.getElementById("whatEverId").innerHTM ;

Answer 4

jcomeau_ictx 建议的是一种低效的编辑 insideHTML 的方法。 查看 Ben Cherry 的 PPT http://www.bcherry.net/talks/js-better-faster

正确的方法是分离元素并对其进行更改，然后将其附加回父节点。 使用此要点中的 https://gist.github.com/cowboy/938767 原生 JavaScript 来 分离元素。

Answer 5

如果要追加，只需将 = 更改为 +=

document.getElementById("whatEverId").innerHTML += '你好二';

如果加前缀

document.getElementById("whatEverId").innerHTML = '你好二' + document.getElementById("whatEverId").innerHTML;

尽管我强烈建议使用 jQuery 或 MooTools javascript 库/框架来完成此类事情。如果您要添加标签而不仅仅是文本节点，那么您应该使用 DOM createElement 或上述库/框架之一。

Answer 6

你可以通过像这样附加 div 字符串来做到这一点..

document.getElementById('div_id').innerHTML += '你好二';