使用 document.createElement 创建 html 元素时更改 html 元素在父标记中的位置

Question

我刚开始学习Javascript，现在我在document.createElement上。我知道你可以用这种方式创建一个HTML标记，然后你必须把它放在一个已经存在的HTML标记中(父标记(。我的问题是我可以选择将创建的HTML标记放在父标记中的确切位置吗

举个例子，我有以下HTML：

<div id="parent">
<div>
<p>First paragraph</p>
</div>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>

这个javascript：

const getMyDiv = document.getElementById("parent");
const createParagraph = document.createElement("p");
getMyDiv.appendChild(createParagraph);

我会得到以下结果：

<div id="parent">
<div>
<p>First paragraph</p>
</div>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p></p>
</div>

所以我想问的是如何在不同的位置创建这个<p>，例如：

<div id="parent">
<div>
<p>First paragraph</p>
</div>
<p>Second paragraph</p>
<p></p>
<p>Third paragraph</p>
</div>

Answer 1

.appendChild()，正如您所演示的，确实可以将您创建的元素附加在所选元素的子元素列表的末尾。

不过，根据您的需要，还可以使用其他方法，因此您可以将元素安装到任何您想要的位置，例如.insertBefore((或.prepend((

它们的工作方式存在一些差异，因此我建议您查看提供的链接，以便了解差异。

Answer 2

如果您想将

位置放置到特定位置，可以使用此脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
</style>
<script language="javascript">
function myFunction(){
//var getMyDiv = document.getElementById("parent");
//var createParagraph = document.createElement("p");
//getMyDiv.appendChild(createParagraph);
var child = document.createElement('p')
var parent = document.getElementById("parent");
parent.insertChildAtIndex(child, 2)
}

Element.prototype.insertChildAtIndex = function(child, index) {
if (!index) index = 0
if (index >= this.children.length) {
this.appendChild(child)
} else {
this.insertBefore(child, this.children[index])
}
}
</script>
<button onclick="myFunction()">Try it</button>
<div id="parent" style="background-color:red;width=100px;height:100px">
<div>
<p>First paragraph</p>
</div>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>

检查另存为html文件并查看浏览器中的检查元素