javascript innerHTML 添加而不是替换答案

【问题标题】：javascript innerHTML adding instead of replacingjavascript innerHTML 添加而不是替换
【发布时间】：2011-09-29 10:57:59
【问题描述】：

快速提问，我知道我们可以更改 a 的内容

<div id="whatEverId">hello one<div> 使用：

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

现在，有没有办法可以添加东西到 div 而不是替换它？？？所以我可以得到

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

（当然使用类似的东西）

【问题讨论】：

标签： javascript ajax dom innerhtml

【解决方案1】：

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

【讨论】：

【解决方案2】：

请注意，使用element.innerHTML += 'content' 会将inputs 和textareas 清空为默认的空白状态，取消单击复选框，以及删除附加到这些元素的任何事件（例如onclick、on hover等），因为整个innerHTML 将被浏览器重新解释，这意味着.innerHTML 被清空并用组合内容重新从头开始填充。

如果您需要保持状态，则需要创建一个新元素（例如 <span>）并将其附加到当前元素，如下所示：

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

【讨论】：

让 newElement = document.createElement('span');我想？

【解决方案3】：

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

【讨论】：

【解决方案4】：

jcomeau_ictx 建议的是一种低效的编辑 innerHTML 的方法。查看本樱桃的PPThttp://www.bcherry.net/talks/js-better-faster

正确的方法是分离元素并对其进行更改，然后将其附加回父节点。从这个要点使用https://gist.github.com/cowboy/938767 Native javascript 分离元素。

【讨论】：

请解释一下。第一个链接坏了。

【解决方案5】：

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

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

如果加前缀

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

虽然我强烈建议使用 jQuery 或 MooTools javascript 库/框架来做这类事情。如果您添加的标签不仅仅是文本节点，那么您应该使用 DOM createElement 或上述库/框架之一。

【讨论】：

【解决方案6】：

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

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

【讨论】：