logo标签列表

如何使用JS向HTML body添加内容？

javascript
52

我在我的HTML <body> 中有许多<section>，希望能通过JavaScript添加更多。但是，使用innerHTML只会用新的替换掉旧的，而不是添加到旧的中。

我还可以使用什么？

4
如果您提供当前的代码，您将得到一个更具体的答案。 - gotohales
11个回答
63

你可以使用

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)
或者
document.getElementById("parentID").innerHTML+= "new content"
6
如果可能的话，我总是倾向于使用DOM方法; 例如.createElement, .appendChild, .insertBefore, .replaceChild等。 - Paul S.
13
我知道这是一个旧答案，但在innerHTML上使用+=并不是将内容添加到元素的好方法。我在已经加载广告的元素上执行了+=操作，结果广告实际上在追加内容后消失了。改为使用appendChild(element)而不是+= "content"解决了广告消失的问题。这只是给未来通过Google找到这个页面的用户一个提示 :) - Joe
第二种会破坏现代JS应用程序和许多其他东西，特别是那些使用“虚拟”DOM（即ReactJs等）的应用程序。始终使用appendChild。第二种选择将获取当前值，附加您的新字符串并替换当前值，这将终止虚拟DOM状态与屏幕上呈现的DOM之间的连接。会出问题的。请使用第一种方法，即appendChild或其他DOM API。 - Lukas Liesis
28

我刚刚发现一个类似于这个问题的解决方案，其中包含了一些性能统计数据。

看起来下面的示例更快：

document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>');

InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML.

enter image description here

参考: 1) 性能数据 2) API - insertAdjacentHTML

希望这个内容对您有所帮助。

谢谢！insertAdjacentHTML方法非常有帮助！ - Francis Niu
2
还值得一提的是，它可以在大多数浏览器上运行，包括Internet Explorer 4+。 - Murilo
26

我认为如果你想直接添加内容到网页的主体部分，最好的方法是：

document.body.innerHTML += "bla bla";

要替换它，请使用：

document.body.innerHTML = "bla bla";
6
改为追加而不是删除，代码如下：document.body.innerHTML += "bla bla"; - Trev14
1
这个答案是误导性的，因为第一种方式（document.body.innerHTML = "bla blah";）并不是向body添加内容，而是替换body中的内容。而且用户明确要求一种方法来向已经存在内容的body添加内容。所以问题的答案就是你展示的技术#2。技术#1可以作为附注说明添加。 - jbyrd
1
这会对JS应用程序产生副作用，而且这种方法会破坏事件和各种随机的事情。不要“添加”到innerHTML中，请使用DOM API，例如appendChild。 - Lukas Liesis
这个答案破坏了很多东西，正如@LukasLiesis所指出的那样。不知道为什么会有这么多赞... - Peska
@Peska之所以有赞同是因为它提供了工作的感觉。您可以运行此代码，它将完成任务。如果应用程序没有更多内容，那么完全没问题，但通常应用程序会比这个代码多一些，然后东西就会出问题，找出为什么完全“不相关”的事情破坏了您的代码将是可怕的一天。这就像AI生成的代码，通常可以正常工作，而不知道它有多么错误。 - Lukas Liesis
14

尝试以下语法：

document.body.innerHTML += "<p>My new content</p>";
4
对于通过谷歌等搜索引擎进入本问题的读者：此答案回答了标题中的问题。+1 - cssyphus
读者还应该查看下面Ulysse BN的答案中的优秀快捷方式。 - cssyphus
这是一个替换+追加的操作，而不仅仅是追加。在长页面上，这可能会非常缓慢，用户可能会看到页面闪烁。 - Volomike
这会破坏现代JS应用程序。请使用DOM API appendChild或类似方法。 - Lukas Liesis
5
你可能正在使用的是 

document.getElementById('element').innerHTML = "New content"

试试这个替代方案：
document.getElementById('element').innerHTML += "New content"

或者更好的方法是使用DOM 操作：

document.getElementById('element').appendChild(document.createElement("div"))

相较于使用 innerHTML, 使用Dom操纵更好，因为 innerHTML 只是简单地将一个字符串转储到文档中。浏览器需要重新解析整个文档来获取其结构。

请不要向他人推荐w3schools，它与w3没有官方关联并含有很多错误信息（请查看http://w3fools.com）。 - Paul S.
@PaulS。如果您有其他的DOM操作教程，我很乐意更改链接。 - Cerbrus
@Cerbrus，没有 innerHtml 属性。请使用正确的语法更新您的答案 - innerHTML。 - likerRr
@likerRr：看起来你找到了我一个非常古老的答案...哇，那时候我还有很多东西要学习 o.O - Cerbrus
那么，@likerRr，现在可以移除 DV 了吗？ - Cerbrus
显示剩余2条评论
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>
2

在大多数浏览器中，您可以使用JavaScript变量来替代document.getElementById。假设您的HTML内容如下：

<section id="mySection"> Hello </section>

然后你可以在JavaScript中将mySection作为变量引用：

mySection.innerText += ', world'
// same as: document.getElementById('mySection').innerText += ', world'

请提供需要翻译的具体内容。 

mySection.innerText += ', world!'
<section id="mySection"> Hello </section>

1
document.querySelector('body').appendChild( //your content )
1
你也可以像这样做。
document.querySelector("#yourid").append('<div>my element<div>');
0

只是：

    document.getElementById('myDiv').innerHTMl += "New Content";
嗯，那将追加新的HTML代码而不是替换它。 - Cornea Valentin
所以我认为答案是正确的，但完全没有解释。 - Cornea Valentin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接