添加javascript innerHTML而不是替换

Question

快速问题，我知道我们可以改变一个内容

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

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

现在，有没有办法可以将东西添加到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

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

Answer 3

jcomeau_ictx建议的是编辑innerHTML的低效方法。检查Ben cherry的PPT http://www.bcherry.net/talks/js-better-faster

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

Answer 4

如果要追加，可以将=更改为+ =

document.getElementById（“whatEverId”）。innerHTML + ='hello two';

如果加前缀

document.getElementById（“whatEverId”）。innerHTML ='hello two'+ document.getElementById（“whatEverId”）。innerHTML;

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

Answer 5

你可以通过附加这样的div字符串来实现它。

document.getElementById（'div_id'）。innerHTML + ='Hello Two';

Answer 6

请注意，使用element.innerHTML += 'content'会将inputs和textareas清空为默认的空白状态，取消选中复选框等，因为整个innerHTML将被浏览器重新解释。

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

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