blocks|key|432431|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|432432|document.getElementById("parentID").appendChild(/*..your+content+created+using+DOM+methods..*/)|code-block|syntax|javascript|432433|或|432434|document.getElementById("parentID").innerHTML%2B=+"new+content"|432435|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can use</p>

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

<p>or</p>

<pre><code>document.getElementById("parentID").innerHTML+= "new content"
</code></pre>


blocks|key|214432|text|我刚刚遇到了一个类似于这个问题的解决方案，其中包含了一些性能统计数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|214433|看起来下面的例子更快：|214434|​|214435|document.getElementById('container').insertAdjacentHTML('beforeend',+'<div+id="idChild">+content+html+</div>');|code-block|syntax|javascript|214436|214437|InnerHTML+vs+jQuery+1+vs+appendChild+vs+innerAdjecentHTML。|214438|214439|📷|atomic|offset|length|214440|214441|参考:+1)+Performance+stats+2)+API+-+insertAdjacentHTML|214442|我希望这能有所帮助。|214443|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/5a354cba895879740cf0535908c6fdc2.jpeg|imageAlt|1|LINK|MUTABLE|url|https://jsperf.com/insert-html-to-div|2|https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML^0|0|0|0|0|0|0|0|0|1|0|0|0|7|H|1|S|O|2|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1H|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1J|8|@]|9|@]|A|$]]|$1|N|3|E|5|6|7|1K|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1L|8|@]|9|@$R|1M|S|1N|1|1O]]|A|$]]|$1|T|3|E|5|6|7|1P|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1Q|8|@]|9|@$R|1R|S|1S|1|1T]|$R|1U|S|1V|1|1W]]|A|$]]|$1|W|3|X|5|6|7|1X|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15|16|-4]]|17|$5|18|12|19|A|$1A|1B]]|1C|$5|18|12|19|A|$1A|1D]]]]

<p>I Just came across to a similar to this question solution with included some performance statistics.</p>

<p>It seems that example below is faster:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('container').insertAdjacentHTML('beforeend', '&lt;div id="idChild"&gt; content html &lt;/div&gt;');</code></pre>
</div>
</div>
</p>

<p>InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML.</p>

<p><a href="https://i.stack.imgur.com/BQnCC.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/BQnCC.jpg" alt="enter image description here"></a></p>

<p>Reference: 
1) <a href="https://jsperf.com/insert-html-to-div" rel="noreferrer">Performance stats</a>
2) <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML" rel="noreferrer">API - insertAdjacentHTML</a></p>

<p>I hope this will help. </p>


blocks|key|432544|text|我认为如果你想直接将内容添加到正文中，最好的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|432545|document.body.innerHTML+%2B=+"bla+bla";|code-block|syntax|javascript|432546|要替换它，请使用：|432547|document.body.innerHTML+=+"bla+bla";|432548|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I think if you want to add content directly to the body, the best way is:</p>
<pre><code>document.body.innerHTML += &quot;bla bla&quot;;
</code></pre>
<p>To replace it, use:</p>
<pre><code>document.body.innerHTML = &quot;bla bla&quot;;
</code></pre>


blocks|key|214288|text|尝试以下语法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|214289|document.body.innerHTML+%2B=+"<p>My+new+content</p>";|code-block|syntax|javascript|214290|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try the following syntax:</p>

<pre><code>document.body.innerHTML += "&lt;p&gt;My new content&lt;/p&gt;";
</code></pre>


blocks|key|214217|text|你可能是在用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|214218|document.getElementById('element').innerHTML+=+"New+content"|code-block|syntax|javascript|214219|试着这样做：|214220|document.getElementById('element').innerHTML+%2B=+"New+content"|214221|或者，最好使用DOM+Manipulation|offset|length|214222|document.getElementById('element').appendChild(document.createElement("div"))|214223|与使用innerHTML相比，最好使用Dom操作，因为innerHTML只是将一个字符串转储到文档中。浏览器必须重新解析整个文档才能得到它的结构。|style|CODE|214224|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.webplatform.org/wiki/tutorials/traversing_the_dom|1|http://docs.webplatform.org/wiki/tutorials/creating_and_modifying_html#Creating_HTML^0|0|0|0|0|7|3|0|B|C|1|0|0|3|9|R|9|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@$M|19|N|1A|1|1B]|$M|1C|N|1D|1|1E]]|A|$]]|$1|O|3|P|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1G|8|@$M|1H|N|1I|S|T]|$M|1J|N|1K|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]]]

<p>You're probably using  </p>

<pre><code>document.getElementById('element').innerHTML = "New content"
</code></pre>

<p>Try this instead: </p>

<pre><code>document.getElementById('element').innerHTML += "New content"
</code></pre>

<p>Or, preferably, use <a href="http://docs.webplatform.org/wiki/tutorials/traversing_the_dom" rel="nofollow noreferrer">DOM</a> <a href="http://docs.webplatform.org/wiki/tutorials/creating_and_modifying_html#Creating_HTML" rel="nofollow noreferrer">Manipulation</a>:</p>

<pre><code>document.getElementById('element').appendChild(document.createElement("div"))
</code></pre>

<p>Dom manipulation would be preferred compared to using <code>innerHTML</code>, because <code>innerHTML</code> simply dumps a string into the document. The browser will have to reparse the entire document to get it's stucture.</p>


blocks|key|432689|text|工作演示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|432690|<!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>|code-block|syntax|javascript|432691|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Working demo:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
onload = function(){
var divg = document.createElement("div");
divg.appendChild(document.createTextNode("New DIV"));
document.body.appendChild(divg);
};
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|214336|text|在大多数浏览器中，您可以使用javascript变量而不是document.getElementById。假设您的html正文内容如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|214337|<section+id="mySection">+Hello+</section>|code-block|syntax|javascript|214338|然后你可以在javascript中将mySection作为一个变量来引用：|214339|mySection.innerText+%2B=+',+world'
//+same+as:+document.getElementById('mySection').innerText+%2B=+',+world'|214340|请看下面的代码片段：|214341|​|214342|mySection.innerText+%2B=+',+world!'|214343|<section+id="mySection">+Hello+</section>|214344|214345|entityMap^0|T|N|0|0|I|9|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|17|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|18|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|W|3|R|5|6|7|1B|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|Y|$]]

<p>In most browsers, you can use a javascript variable instead of using <code>document.getElementById</code>. Say your html body content is like this:</p>

<pre><code>&lt;section id="mySection"&gt; Hello &lt;/section&gt;
</code></pre>

<p>Then you can just refer to <code>mySection</code> as a variable in javascript:</p>

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

<p>See this snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>mySection.innerText += ', world!'</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="mySection"&gt; Hello &lt;/section&gt;</code></pre>
</div>
</div>
</p>


blocks|key|432447|text|只要：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|432448|++++document.getElementById('myDiv').innerHTMl+%2B=+"New+Content";|code-block|syntax|javascript|432449|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just:</p>

<pre><code>    document.getElementById('myDiv').innerHTMl += "New Content";
</code></pre>


blocks|key|432730|text|最近，我遇到了同样的问题，但我想在正文内容的开头添加内容。所以我发现这个解决方案是值得的:在指定位置的同时使用insertAdjecentHTML(positions,+text)。该职位可以是'beforebegin'、'afterbegin'、'beforeend'、'afterend'|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|432731|const+element+=+document.getElementById('my-id')

element.insertAdjacentHTML(position,+text);|code-block|syntax|javascript|432732|entityMap^0|1J|Z|2P|D|33|C|3G|B|3S|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|L|$]]

<p>recently, I faced the same issue but I wanted to add content just at the beginning of the content of the body. so I found this solution worthy:
using <code>insertAdjecentHTML(positions, text)</code> while specifying the position. The position can either <code>'beforebegin'</code>, <code>'afterbegin'</code>, <code>'beforeend'</code>, <code>'afterend'</code></p>
<pre><code>const element = document.getElementById('my-id')

element.insertAdjacentHTML(position, text);
</code></pre>


blocks|key|432748|text|您也可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|432749|document.querySelector("#yourid").append('<div>my+element<div>');|code-block|syntax|javascript|432750|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can also do like this</p>
<pre><code>document.querySelector(&quot;#yourid&quot;).append('&lt;div&gt;my element&lt;div&gt;');
</code></pre>


blocks|key|432759|text|document.querySelector('body').appendChild(+//your+content+)|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|432760|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>document.querySelector('body').appendChild( //your content )
</code></pre>


<p>I have many <code>&lt;section&gt;</code> in my html <code>&lt;body&gt;</code> and want to add more through javascript. However, using <code>innerHTML</code> is just replacing my existing sections with new ones, instead of adding them to the old ones.</p>

<p>What else can I use?</p>


How to add content to html body using JS?

jQuery

我有很多<section>在我的html <body>中，并希望通过javascript添加更多。然而，使用innerHTML只是用新的部分替换我现有的部分，而不是将它们添加到旧的部分。我还能用到什么？

问如何使用JS向html body添加内容？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JS向html body添加内容？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JS向html body添加内容？
EN