Javascript 如何使用JS向html正文添加内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13495010/
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
How to add content to html body using JS?
提问by apr
I have many <section>in my html <body>and want to add more through javascript. However, using innerHTMLis just replacing my existing sections with new ones, instead of adding them to the old ones.
<section>我的 html 中有很多内容，<body>想通过 javascript 添加更多内容。但是，使用innerHTML只是用新的部分替换我现有的部分，而不是将它们添加到旧的部分。
What else can I use?
我还能用什么？
回答by Sajjan Sarkar
You can use
您可以使用
document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)
or
或者
document.getElementById("parentID").innerHTML+= "new content"
回答by Webbing
I think if you want to add content directly to the body, the best way is:
我觉得如果你想直接给body添加内容，最好的方法是：
document.body.innerHTML = document.body.innerHTML + "bla bla";
To replace it, use:
要替换它，请使用：
document.body.innerHTML = "bla bla";
回答by speksy
I Just came across to a similar to this question solution with included some performance statistics.
我刚刚遇到了一个类似于这个问题的解决方案，其中包含了一些性能统计数据。
It seems that example below is faster:
下面的例子似乎更快：
document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>');InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML.
InnerHTML vs jQuery 1 vs appendChild vsinnerAdjecentHTML。
Reference: 1) Performance stats2) API - insertAdjacentHTML
参考：1)性能统计2) API - insertAdjacentHTML
I hope this will help.
我希望这将有所帮助。
回答by kenorb
Try the following syntax:
尝试以下语法：
document.body.innerHTML += "<p>My new content</p>";
回答by Cerbrus
You're probably using
你可能正在使用
document.getElementById('element').innerHTML = "New content"
Try this instead:
试试这个：
document.getElementById('element').innerHTML += "New content"
Or, preferably, use DOMManipulation:
或者，最好使用DOM Manipulation：
document.getElementById('element').appendChild(document.createElement("div"))
Dom manipulation would be preferred compared to using innerHTML, because innerHTMLsimply dumps a string into the document. The browser will have to reparse the entire document to get it's stucture.
与使用相比，DOM 操作更受欢迎innerHTML，因为innerHTML只是将字符串转储到文档中。浏览器将不得不重新解析整个文档以获得它的结构。
回答by Ulysse BN
In most browsers, you can use a javascript variable instead of using document.getElementById. Say your html body content is like this:
在大多数浏览器中，您可以使用 javascript 变量而不是使用document.getElementById. 假设你的 html body 内容是这样的：
<section id="mySection"> Hello </section>
Then you can just refer to mySectionas a variable in javascript:
然后你可以mySection在javascript中将其称为变量：
mySection.innerText += ', world'
// same as: document.getElementById('mySection').innerText += ', world'
See this snippet:
看到这个片段：
mySection.innerText += ', world!'<section id="mySection"> Hello </section>回答by Saravanan Nandhan
Working demo:
工作演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
onload = function(){
var divg = document.createElement("div");
divg.appendChild(document.createTextNode("New DIV"));
document.body.appendChild(divg);
};
</script>
</head>
<body>
</body>
</html>
回答by Akhil Sekharan
Just:
只是：
document.getElementById('myDiv').innerHTMl += "New Content";
