Question

我的html <section>中有很多<body>，想要通过javascript添加更多内容。但是，使用innerHTML只是用新的部分替换现有部分，而不是将它们添加到旧部分。

我还可以使用其他什么？

Answer 1

您可以使用

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

或

document.getElementById("parentID").innerHTML+= "new content"

Answer 2

我认为如果你想直接向内容添加内容，最好的方法是：

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

要替换它，请使用：

document.body.innerHTML = "bla bla";

Answer 3

我刚遇到一个与此问题类似的解决方案，其中包含一些性能统计信息。

以下示例似乎更快：

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

InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML。

参考： 1）Performance stats 2）API - insertAdjacentHTML

我希望这会有所帮助。

Answer 4

请尝试以下语法：

document.body.innerHTML += "<p>My new content</p>";

Answer 5

你可能正在使用

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

请改为尝试：

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

或者，最好使用DOM Manipulation：

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

与使用innerHTML相比，Dom操作会更受欢迎，因为innerHTML只是将字符串转储到文档中。浏览器必须重新整理整个文档以获得它的结构。

Answer 6

在大多数浏览器中，您可以使用javascript变量而不是DT no_of_records total 2017-05-01 00:00:00.000 241 2077 2017-05-01 04:00:00.000 842 2077 2017-05-01 08:00:00.000 1049 2077 2017-05-01 12:00:00.000 1517 2077 2017-05-01 16:00:00.000 1627 2077 2017-05-01 20:00:00.000 2077 2077 2017-05-02 00:00:00.000 151 1992 2017-05-02 04:00:00.000 772 1992 2017-05-02 08:00:00.000 951 1992 2017-05-02 12:00:00.000 1114 1992 2017-05-02 16:00:00.000 1693 1992 2017-05-02 20:00:00.000 1992 1992。说你的HTML主体内容是这样的：

document.getElementById

然后你可以在javascript中引用<section id="mySection"> Hello </section>作为变量：

mySection

请参阅此代码段：

＆＃13;

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

＆＃13;

mySection.innerText += ', world!'

＆＃13;

Answer 7

工作演示：

<!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>

Answer 8

最近，我遇到了同样的问题，但我想在正文内容的开头添加内容。所以我发现这个解决方案值得：在指定位置时使用 insertAdjecentHTML(positions, text)。位置可以是'beforebegin'、'afterbegin'、'beforeend'、'afterend'

const element = document.getElementById('my-id')

element.insertAdjacentHTML(position, text);

Answer 9

你也可以这样做

import seaborn as sns

sns.set_theme(color_codes=True)
iris = sns.load_dataset("iris")
species = iris.pop("species")
g = sns.clustermap(iris)
g.ax_heatmap.set_xticklabels([r'$\it{' + ticklabel.get_text().replace('_', '\\ ') + '}$'
                              for ticklabel in g.ax_heatmap.get_xticklabels()])
plt.show()

Answer 10

只需：

    document.getElementById('myDiv').innerHTMl += "New Content";

如何使用JS向html正文添加内容？

10 个答案: