使用JavaScript的insertAdjacentHTML添加到页面

appendChild and insertBefore are very useful when it comes to adding elements to a web page, but doing so often involves rather baroque navigation through the DOM, and laborious construction of elements.

在将元素添加到网页中时， appendChild和insertBefore非常有用，但是这样做通常涉及遍历DOM的巴洛克式导航以及繁琐的元素构造。

Sometimes, you just want to sneak a tag and some content beside or inside an element. Thankfully, insertAdjacentHTML can come to the rescue in those circumstances.

有时，您只想在元素旁边或元素内潜入标签和一些内容。 值得庆幸的是，在这种情况下， insertAdjacentHTML可以拯救您。

定位插入物 (Targeting the Insert)

A position parameter must be used with insertAdjacentHTML, which may be one of four values: beforebegin, afterbegin, beforeend or afterend. It’s probably easiest to visualize these locations relative to a container element (although naturally insertAdjacentHTML can be applied to any element):

位置参数必须与insertAdjacentHTML一起使用，该参数可以是四个值之一： beforebegin ， afterbegin ， beforeend或afterend 。 相对于容器元素，可视化这些位置可能是最容易的(尽管可以自然地将insertAdjacentHTML应用于任何元素)：

If we imagine that that the element has an id of #sidecontent, then the following code:

如果我们假设该元素的id为#sidecontent ，则以下代码：

var sidecontent = document.getElementById("sidecontent");
sidecontent.insertAdjacentHTML("beforebegin", "<p>Day after day</p>");

…will place a paragraph containing the words “Day after day” before the <div>.

…将在<div> 之前放置一个包含“日复一日”字样的段落。

Note that beforebegin and the other positions are strings, and must be surrounded by single or double quotes.

请注意， beforebegin和其他位置是字符串，并且必须用单引号或双引号引起来。

The following will place a heading at the start of the div:

下面将在div的开头放置一个标题：

var play = "<h1>Add It Up</h1>";
sidecontent.insertAdjacentHTML("afterbegin", play);

And this code at the end, after the last of the content that already exists in the element:

并将此代码放在元素中已经存在的最后一个内容的末尾 ：

var butadd = "But the day after today";
sidecontent.insertAdjacentHTML("beforeend", butadd);

And finally, after the container:

最后，在容器之后：

var stoppage = "<p>I will stop</p>";
sidecontent.insertAdjacentHTML("afterend", stoppage);

Note that each of these takes a string, parsed into HTML, that is added to the DOM tree”. insertAdjacentHTML doesn’t attempt to reinterpret the existing element on the page, and has no need to serialize the string it is supplied, so it executes much faster than methods such as innerHTML.

请注意，它们每个都采用解析为HTML的字符串，然后将其添加到DOM树中。” insertAdjacentHTML不会尝试重新解释页面上的现有元素，并且不需要序列化所提供的字符串，因此它的执行速度比innerHTML方法快得多。

After all these procedures, our theoritical would look something like this:

完成所有这些步骤之后，我们的理论将如下所示：

Day after day

日复一日

加起来 (Add It Up)

…

…

…

…

But the day after today

但是后天

I will stop

我会停下来

那么有什么区别？ (So What’s The Difference?)

What’s the difference between something like insertBefore and insertAdjacentHTML? insertBefore and appendChild must take built up, formed and created elements, while insertAdjacentHTML takes a string with appropriate characters inside it.

像insertBefore和insertAdjacentHTML类的东西有什么insertAdjacentHTML ？ insertBefore和appendChild必须采用组成， 形成和创建的元素，而insertAdjacentHTML采用其中包含适当字符的字符串 。

翻译自: https://thenewcode.com/387/Adding-To-a-Page-with-JavaScripts-insertAdjacentHTML