在JavaScript中的元素之前插入节点

我试图操纵一个网页，开始在一个特定元素之前添加几个元素

具体来说，我试图在页面上的h3之前插入标题和p标记。我的代码目前看起来像这样

<script>
  (function() {
    var elmnt = document.createElement("h3");
    var textnode = document.createTextNode("Behind the Scenes of The Lion King at the Lyceum Theatre");
    elmnt.appendChild(textnode);
    var item = document.getElementsByTagName("h3")[3];
    item.before(textnode);
  })();
</script>

（功能（）{
var elmnt=document.createElement（“h3”）；
var textnode=document.createTextNode（“Lyceum剧院狮子王的幕后”）；
elmnt.appendChild（textnode）；
var item=document.getElementsByTagName（“h3”）[3]；
item.before（textnode）；
})();

这是在页面中插入文本“Lyceum剧院狮子王的幕后”，但它不在标题3标签中。是否有更好的方法开始在标题前添加多个元素

网页：

---

您可以使用

insertBefore（）

方法执行此操作。用法非常简单：

您需要在要为新元素添加前缀的元素的父节点上调用它。要获取其父节点，请执行以下操作：

var item = document.getElementsByTagName("h3");
item[0].parentNode

insertBefore（）

需要两个非可选参数。第一个参数显然是要预先添加的元素，第二个参数是目标元素-因此是您的

元素

下面是一个示例（只需单击“运行代码片段”）：

var elmnt=document.createElement（“h3”）；
var textnode=document.createTextNode（“Lyceum剧院狮子王的幕后”）；
elmnt.appendChild（textnode）；
var item=document.getElementsByTagName（“h3”）；
项[0].parentNode.insertBefore（elmnt，项[0]）；

H1
H2-1
同侧眼睑

H2-2
H3-1
同侧眼线

H3-2
同侧眼睑

H2-3
lorem ipsum

您可以使用

insertBefore（）

方法完成此操作。用法非常简单：

您需要在要为新元素添加前缀的元素的父节点上调用它。要获取其父节点，请执行以下操作：

var item = document.getElementsByTagName("h3");
item[0].parentNode

insertBefore（）

需要两个非可选参数。第一个参数显然是要预先添加的元素，第二个参数是目标元素-因此是您的

元素

下面是一个示例（只需单击“运行代码片段”）：

var elmnt=document.createElement（“h3”）；
var textnode=document.createTextNode（“Lyceum剧院狮子王的幕后”）；
elmnt.appendChild（textnode）；
var item=document.getElementsByTagName（“h3”）；
项[0].parentNode.insertBefore（elmnt，项[0]）；

H1
H2-1
同侧眼睑

H2-2
H3-1
同侧眼线

H3-2
同侧眼睑

H2-3
lorem ipsum

如果可以访问标头的父元素，则可以使用将节点附加到父元素的一个子元素之前

const insert=（x）=>{
var elmnt=document.createElement（“h3”）；
var textnode=document.createTextNode（“Lyceum剧院狮子王的幕后”）；
elmnt.appendChild（textnode）；
var parent=document.getElementById（'parent'）；
parent.insertBefore（elmnt，parent.children[parent.children.length-2]）；
}

在我面前插入
插入

如果可以访问标头的父元素，则可以使用将节点附加到父元素的一个子元素之前

const insert=（x）=>{
var elmnt=document.createElement（“h3”）；
var textnode=document.createTextNode（“Lyceum剧院狮子王的幕后”）；
elmnt.appendChild（textnode）；
var parent=document.getElementById（'parent'）；
parent.insertBefore（elmnt，parent.children[parent.children.length-2]）；
}

在我面前插入
插入

您能否提供一个代码的工作示例，清楚地显示您的问题？您好，附件中的图像显示了问题。我试图在另一个h3元素之前附加新的h3元素。但是，这只呈现为#文本，而不是在一个元素中。您想将一个

元素放入另一个

元素吗？不，我想在元素之前创建一个新的。基本上，我想在前面添加格式化文本，例如标题这是文本，与您试图执行的操作相混淆。您将文本附加到新创建的

h3

，但不插入

h3

（elmnt）插入textNode。您能提供一个代码的工作示例，清楚地显示您的问题吗？您好，附件中的图像显示了问题。我正在尝试将新的h3元素附加到另一个元素之前。但是，这只呈现为#文本，而不是在一个元素中。您希望将

元素放入另一个

元素中元素？不，我想在元素之前创建一个新的元素。基本上，我想在元素前面添加格式化文本，例如标题这是文本，与您试图执行的操作相混淆。您将文本附加到新创建的

h3

，但然后插入文本节点，而不是插入

h3

（elmnt）。