JavaScript innerHTML添加而不是替换

Question

快速提问，我知道我们可以通过以下方式更改一个

的内容:

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

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

现在，我是否可以以添加的方式将内容添加到div中，而不是替换它？？？ 这样我就可以得到

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

(当然，使用类似的方法)

- Gmo

Answer 1

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

- jcomeau_ictx

Answer 2

请注意，使用element.innerHTML += 'content'将清空和的内容，使其回到默认空白状态，取消选中复选框，并删除附加到这些元素上的任何事件（例如<code>onclick</code>，<code>on hover</code>等），因为整个<code>innerHTML</code>会被浏览器重新解释，这意味着<code>.innerHTML</code>将被清空并从头开始填充组合的内容。</br><div class="h-2"></div>如果您需要保留状态，您需要创建一个新元素（例如<code><span></code>）并将其附加到当前元素中，如下所示：</br><div class="h-2"></div><pre class="lang-js prettyprint-override"><code>let newElement = 'span' newElement.innerHTML = 'new text' document.getElementById('oldElement').appendChild(newElement) </code></pre>

- Nighto

---

让新元素 = document.createElement('span'); 我想是这样的？ - xgarb

Answer 3

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

- Piotr Kula

Answer 4

jcomeau_ictx提出的修改innerHTML的方法效率低下。请查看Ben Cherry的PPT http://www.bcherry.net/talks/js-better-faster。

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

- mareenator

---

请解释一下。第一个链接已经失效了。 - Frank Conijn - Support Ukraine

Answer 5

如果你是在追加内容，你可以将等号（=）改为加等于（+=）

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

如果是前缀

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

虽然我强烈建议使用jQuery或MooTools JavaScript库/框架来完成这种操作。如果你不仅仅是添加文本节点而是添加标签，那么你应该使用DOM createElement方法或者前面提到的某个库/框架。

- gingerCodeNinja

Answer 6

您可以通过像这样附加div字符串来实现...

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

- Rukmi Patel