javascript innerHTML 添加而不是替换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6594014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript innerHTML adding instead of replacing
提问by Gmo
quick question, i know we can changethe content of a
快速提问，我知道我们可以更改一个的内容
<div id="whatEverId">hello one<div>by using:
<div id="whatEverId">hello one<div>通过使用：
document.getElementById("whatEverId").innerHTML="hello two";
now, is there a way I can ADDstuff to the div instead of replacing it??? so i can get
现在，有没有办法可以向 div添加东西而不是替换它？？？所以我可以得到
<div id="whatEverId">hello one hello two<div>
<div id="whatEverId">hello one hello two<div>
(using something similar of course)
（当然使用类似的东西）
回答by jcomeau_ictx
<div id="whatever">hello one</div>
<script>
document.getElementById("whatever").innerHTML += " hello two";
</script>
回答by Piotr Kula
document.getElementById("whatEverId").innerHTML = document.getElementById("whatEverId").innerHTML + "hello two" + document.getElementById("whatEverId").innerHTM ;
回答by Nighto
Notice that using element.innerHTML += 'content'would empty inputs and textareas to their default, blank state, unclick checkboxes etc. because the whole innerHTMLwould be reinterpreted by the browser.
请注意， usingelement.innerHTML += 'content'会将inputs 和textareas清空到它们的默认、空白状态、取消单击复选框等，因为innerHTML浏览器会重新解释整体。
If you need to keep the state, you'd need to create a new element (a <span>for instance) and append it to the current element, as in:
如果需要保持状态，则需要创建一个新元素（<span>例如 a）并将其附加到当前元素，如下所示：
let newElement = 'span'
newElement.innerHTML = 'new text'
document.getElementById('oldElement').appendChild(newElement)
回答by mareenator
What jcomeau_ictx suggested is an inefficient way of editing the innerHTML. Check Ben cherry's PPT http://www.bcherry.net/talks/js-better-faster
jcomeau_ictx 建议的是一种低效的编辑innerHTML 的方式。查看Bencherry的PPT http://www.bcherry.net/talks/js-better-faster
The correct way will be detaching the element and making changes to it and then appending it back to the parent node. Use https://gist.github.com/cowboy/938767Native javascript from this gist to detach element.
正确的方法是分离元素并对其进行更改，然后将其附加回父节点。使用https://gist.github.com/cowboy/938767 本机 javascript 从此要点分离元素。
回答by gingerCodeNinja
If you are appending, you can just change your = to a +=
如果要追加，则只需将 = 更改为 +=
document.getElementById("whatEverId").innerHTML += 'hello two';
document.getElementById("whatEverId").innerHTML += '你好二';
If prefixing
如果加前缀
document.getElementById("whatEverId").innerHTML = 'hello two' + document.getElementById("whatEverId").innerHTML;
document.getElementById("whatEverId").innerHTML = 'hello two' + document.getElementById("whatEverId").innerHTML;
Although I would highly recommend using jQuery or MooTools javascript libraries/frameworks to do this sort of thing. If you're adding tags not just text nodes, then you should use the DOM createElement or one of the aforementioned libraries/frameworks.
虽然我强烈建议使用 jQuery 或 MooTools javascript 库/框架来做这种事情。如果您添加的标签不仅仅是文本节点，那么您应该使用 DOM createElement 或上述库/框架之一。
回答by Rukmi Patel
You can do it by appending div string like this..
你可以通过像这样附加 div 字符串来做到这一点..
document.getElementById('div_id').innerHTML += 'Hello Two';
document.getElementById('div_id').innerHTML += 'Hello Two';
