As I demonstrated in the previous article, it’s common to create HTML elements with JavaScript and add them to the page. The issue then becomes how to add elements where you want them.
正如我在上一篇文章中所演示的，通常使用JavaScript创建HTML元素并将其添加到页面中。 那么问题就变成了如何添加您想要的地方元素。
appendChild (appendChild)
The simplest and most straightforward technique is to
最简单，最直接的技术是
Identify the element you want to put your element inside of.
确定您想要把你的元素里面的元素。
Use
appendChildto add it.使用
appendChild进行添加。
Let’s say we have a <div> element on the page with an id of rootdown. We’ll create a variable of the same name in JavaScript as a reference:
假设我们在页面上有一个<div>元素，其id为rootdown 。 我们将在JavaScript中创建一个具有相同名称的变量作为参考：
var rootdown = document.getElementById("rootdown");rootdown will have some CSS applied to it in a stylesheet:
rootdown将在样式表中应用一些CSS ：
body {
font-family: Source Serif Pro, serif;
}
#rootdown {
color: #333;
background: rgba(0,0,0,0.15);
border: 1px solid #fefacc;
padding: 1rem;
}rootdown doesn’t have any content, yet. Let’s create some: a <p> element. This is unusual, since paragraph content should be visible to users with or without JavaScript, but we’ll use it to illustrate this example:
rootdown还没有任何内容。 让我们创建一些： <p>元素。 这很不寻常，因为无论使用或不使用JavaScript，段落内容都应该对用户可见，但是我们将使用它来说明此示例：
var para = document.createElement("p");
para.innerHTML = "Everybody knows I’m known for dropping science.";To place the para element inside of rootdown, we use appendChild. Think of a birth shot in reverse: we’re inserting an element back inside its parent.
要将para元素放在rootdown ，我们使用appendChild 。 回想一下出生镜头：我们正在将元素插入其父元素内部。
rootdown.appendChild(para);Note that if #rootdown had content, para would be inserted at the end of it. For example, if the <div> has this preexisting content:
请注意，如果#rootdown具有内容，则会在其末尾插入para 。 例如，如果<div>具有此预先存在的内容：
<div id="rootdown">
<p>Like Sweetie Pie by The Stone Alliance.</p>
</div>Running the JavaScript code above would result in:
运行上面JavaScript代码将导致：
Like Sweetie Pie by The Stone Alliance.
就像The Stone Alliance的Sweetie Pie。
Everybody knows I’m known for dropping science.
每个人都知道我以放弃科学而闻名。
Note that paragraph content appended with JavaScript inside the <div> inherits the same presentation rules from the CSS.
请注意，在<div>内附加有JavaScript的段落内容将从CSS继承相同的表示规则。
insertBefore (insertBefore)
What if we want to insert the paragraph before something? First, let’s change the value of para:
如果我们想要什么东西插入前的一段？ 首先，让我们更改para的值：
para.innerHTML = "Never let you down with the stereo sound.";For insertBefore we need two pieces of information: the parent element, and the element we want the insert to be in front of. There’s many ways to identify the second: if it had an id, we could use that. In this case, I’ll use getElementsByTagName:
对于insertBefore我们需要两条信息：父元素和我们希望插入在其前面的元素。 有很多方法可以识别第二个：如果它有一个id ，我们可以使用它。 在这种情况下，我将使用getElementsByTagName ：
var rootdown = document.getElementById("rootdown");
var firstpara = rootdown.getElementsByTagName("p")[0];Because there could be many paragraph elements inside of rootdown, I have to reference the very first slot in the array that holds all of them to locate the first paragraph. With that information, I can insert my new paragraph in the location I wish:
因为rootdown内可能有很多段落元素， rootdown我必须引用数组中的第一个插槽，该插槽将所有元素都放置在第一段中。 有了这些信息，我可以在希望的位置插入新段落：
rootdown.insertBefore(para, firstpara);In case that’s unclear, it could be translated as:
如果不清楚，可以将其翻译为：
parentElement.insertBefore(insertedElement, referenceElement);如果您不知道父元素怎么办？ (What if you don’t know the parent element?)
There might be circumstances when you know the reference element, but not its parent. In that case, we must work backwards from the reference:
在某些情况下，您会知道引用元素，但不知道其父元素。 在这种情况下，我们必须从参考中倒退 ：
referenceElement.parentNode.insertBefore(insertedElement, referenceElement);For example, it might be the case that I wanted to insert para before #rootdown. In that case, the parent of #rootdown would likely be the <body>, but I can’t be certain of that. Therefore, I would use:
例如，可能是我想在 #rootdown 之前插入para #rootdown 。 在这种情况下， #rootdown的父#rootdown可能是<body> ，但我不确定。 因此，我将使用：
rootdown.parentNode.insertBefore(para, rootdown);Which would result in:
这将导致：
Never let you down with the stereo sound.
永远不要让您失望的立体声。
Everybody knows I’m known for dropping science.
每个人都知道我以放弃科学而闻名。
在元素开始处插入 (Inserts At The Start of an Element)
If you want to insert an element at the very start of an element, and not simply before a reference, use the firstChild property:
如果要在元素的最开始而不是在引用之前插入元素，请使用firstChild属性：
var start = rootdown.firstChild;
rootdown.insertBefore(para, start);Note that this still works even if rootdown has no content at all.
请注意，即使rootdown根本没有内容，这仍然有效。
在元素之后插入 (Inserting After an Element)
JavaScript doesn't yet have an explicit insertAfter, but it can be created easily enough using existing methods:
JavaScript还没有显式的insertAfter ，但是可以使用现有方法轻松地创建它：
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);Using our example above, if we wanted to insert this new content:
如果要插入此新内容，请使用上面的示例：
var newLyric = document.createElement("p");
newLyric.innerHTML = "I'm electric like Dick Hyman";…after #rootdown, rather than simply at the end of the element, we could use:
…在 #rootdown 之后 ，而不是仅仅在元素末尾 ，我们可以使用：
rootdown.parentNode.insertBefore(newLyric, rootdown.nextSibling)This can (and probably should) be abstracted into a function:
可以(可能应该)将其抽象为一个函数：
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}Which could be called with:
可以这样调用：
insertAfter(newLyric, rootdown);Next, I’ll look at the reverse: removing elements. This is a little trickier, as you’ll see in a moment.
接下来，我将进行相反的研究： 删除elements 。 稍后您会看到，这有点棘手。
翻译自: https://thenewcode.com/938/Using-appendChild-and-insertBefore
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
