如何使用 JS 將內容添加到 html 正文？
[英]How to add content to html body using JS?
問題描述
我的 html <body>有很多<section>並且想通過 javascript 添加更多內容。 但是，使用innerHTML只是用新的部分替換我現有的部分，而不是將它們添加到舊部分中。
我還能用什么？
11 個解決方案
解決方案1
56 已采納 2012-11-21 14:07:26
您可以使用
document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)
或者
document.getElementById("parentID").innerHTML+= "new content"
解決方案2
24 2018-07-22 19:33:39
我剛剛遇到了一個類似於這個問題的解決方案，其中包含一些性能統計信息。
下面的示例似乎更快：
document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>');
InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML。
參考：1）性能統計2） API - insertAdjacentHTML
我希望這將有所幫助。
解決方案3
20 2015-01-16 10:30:50
我認為如果您想直接將內容添加到正文中，最好的方法是：
document.body.innerHTML += "bla bla";
要替換它，請使用：
document.body.innerHTML = "bla bla";
解決方案4
14 2017-08-03 11:28:41
嘗試以下語法：
document.body.innerHTML += "<p>My new content</p>";
解決方案5
5 2012-11-21 14:11:35
你可能正在使用
document.getElementById('element').innerHTML = "New content"
試試這個：
document.getElementById('element').innerHTML += "New content"
或者，最好使用DOM Manipulation ：
document.getElementById('element').appendChild(document.createElement("div"))
與使用innerHTML相比，Dom 操作更innerHTML ，因為innerHTML只是將字符串轉儲到文檔中。 瀏覽器將不得不重新解析整個文檔以獲取它的結構。
解決方案6
3 2018-10-31 12:00:11
工作演示：
<!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>
解決方案7
2 2017-08-03 15:23:09
在大多數瀏覽器中，您可以使用 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>
解決方案8
0 2012-11-21 14:07:56
只是：
document.getElementById('myDiv').innerHTMl += "New Content";
解決方案9
0 2021-03-21 18:32:08
最近，我遇到了同樣的問題，但我想在正文內容的開頭添加內容。 所以我發現這個解決方案值得：在指定位置時使用insertAdjecentHTML(positions, text) 。 該位置可以是'beforebegin' 、 'afterbegin' 、 'beforeend' 、 'afterend'
const element = document.getElementById('my-id')
element.insertAdjacentHTML(position, text);
解決方案10
0 2021-04-13 20:15:52
你也可以這樣做
document.querySelector("#yourid").append('<div>my element<div>');
解決方案11
0 2021-08-28 05:11:06
document.querySelector('body').appendChild( //your content )
如何從 html 正文內容中提取字符串並添加為 javascript 變量
[英]How to extract a string from html body content and add as a javascript variable
如何在包含 jquery.js 之后但在僅使用 javascript 結束 body 標記之前在 html 文件中添加腳本標記？
[英]How to add script tag in the html file after where jquery.js is included but before ending body tag using javascript only?
如何在jQuery中使用$（“ body”）。append（）添加多個HTML代碼？
[英]How to add multiple HTML code using $(“body”).append() in jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何使用 JavaScript 向 html 正文添加內容？
如何使用javascript在電子郵件正文中添加html？
如何從 html 正文內容中提取字符串並添加為 javascript 變量
如何在js中將html內容添加到靜態文本
如何使用javascript在主體部分插入html內容
如何使用 JS 查看 HTML 中的數據“$content”
如何在包含 jquery.js 之后但在僅使用 javascript 結束 body 標記之前在 html 文件中添加腳本標記？
Matter.js - 將 html 添加到正文的選項
如何在Dojo中將html添加到正文？
如何在jQuery中使用$（“ body”）。append（）添加多個HTML代碼？
相關標簽