javascript - 使用 document.createElement 创建 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()

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