Javascript 更改html元素'；当使用document.createElement创建父标记时，它在父标记中的位置

我刚刚开始学习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>

我将得到以下结果：

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

第一段

第二段

第三段

所以我想问的是我如何在不同的位置创建这个

，例如：

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

第一段

第二段


第三段

.appendChild（）

，如您所演示的，确实可以将您创建的元素附加到所选元素的子元素列表的末尾

不过，根据您的需要，还可以使用其他方法，因此您可以在任何需要的地方安装元素，例如，或

---

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

如果要将位置放置到特定位置，可以使用此脚本

<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>

函数myFunction（）{
//var getMyDiv=document.getElementById（“父项”）；
//var create段落=document.createElement（“p”）；
//getMyDiv.appendChild（创建段落）；
var child=document.createElement（'p'）
var parent=document.getElementById（“父项”）；
parent.insertchildataindex（子，2）
}
Element.prototype.insertchildataindex=函数（子级，索引）{
如果（！index）index=0
if（索引>=this.children.length）{
这个。追加子对象（子对象）
}否则{
this.insertBefore（child，this.children[索引]）
}
}
试试看
第一段

第二段

第三段

---

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

谢谢，这为我提供了另一种有用的方法，感谢您的帮助！

<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>