<section>我的 html 中有很多内容，<body>想通过 javascript 添加更多内容。但是，使用innerHTML只是用新的部分替换我现有的部分，而不是将它们添加到旧的部分。
我还能用什么？
问问题
161433 次
11 回答
56
您可以使用
document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)
或者
document.getElementById("parentID").innerHTML+= "new content"
于 2012-11-21T14:07:26.083 回答
24
我刚刚遇到了一个类似于这个问题的解决方案，其中包含一些性能统计信息。
下面的示例似乎更快：
document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>');InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML。
参考：1）性能统计 2）API - insertAdjacentHTML
我希望这将有所帮助。
于 2018-07-22T19:33:39.693 回答
20
我认为如果您想直接将内容添加到正文中，最好的方法是：
document.body.innerHTML += "bla bla";
要替换它，请使用：
document.body.innerHTML = "bla bla";
于 2015-01-16T10:30:50.687 回答
14
尝试以下语法：
document.body.innerHTML += "<p>My new content</p>";
于 2017-08-03T11:28:41.257 回答
5
你可能正在使用
document.getElementById('element').innerHTML = "New content"
试试这个：
document.getElementById('element').innerHTML += "New content"
或者，最好使用DOM Manipulation：
document.getElementById('element').appendChild(document.createElement("div"))
与 using 相比，Dom 操作更受欢迎innerHTML，因为innerHTML只需将字符串转储到文档中。浏览器将不得不重新解析整个文档以获取它的结构。
于 2012-11-21T14:11:35.783 回答
3
工作演示：
<!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>
于 2018-10-31T12:00:11.963 回答
2
在大多数浏览器中，您可以使用 javascript 变量而不是使用document.getElementById. 假设您的 html 正文内容是这样的：
<section id="mySection"> Hello </section>
然后你可以mySection在javascript中引用一个变量：
mySection.innerText += ', world'
// same as: document.getElementById('mySection').innerText += ', world'
看到这个片段：
mySection.innerText += ', world!'<section id="mySection"> Hello </section>于 2017-08-03T15:23:09.760 回答
0
只是：
document.getElementById('myDiv').innerHTMl += "New Content";
于 2012-11-21T14:07:56.930 回答
0
你也可以这样做
document.querySelector("#yourid").append('<div>my element<div>');
于 2021-04-13T20:15:52.470 回答
0
document.querySelector('body').appendChild( //your content )
于 2021-08-28T05:11:06.617 回答
0
最近，我遇到了同样的问题，但我想在正文内容的开头添加内容。所以我发现这个解决方案值得：insertAdjecentHTML(positions, text)在指定位置时使用。该位置可以是'beforebegin', 'afterbegin', 'beforeend','afterend'
const element = document.getElementById('my-id')
element.insertAdjacentHTML(position, text);
于 2021-03-21T18:32:08.357 回答