为什么 insertBefore 不起作用？答案

【问题标题】：Why is insertBefore not working?为什么 insertBefore 不起作用？
【发布时间】：2018-01-30 11:27:59
【问题描述】：

我已经编写了如下所示的代码。我试图将元素“h45”定位在“年龄”之上。不知何故，它不起作用，我收到以下错误：“新的子元素包含父元素。”有谁知道为什么会发生这种情况以及我该如何解决？我是 JavaScript 新手，我不明白我做错了什么。提前谢谢大家！`

var lastName=document.getElementById("lastName");
 var firstName=document.getElementById("firstName");
 var age= document.getElementById("alter")
 age.addEventListener("blur",showage,false);

function showage()
    {
        if (/[^0-9]/.test(age.value)) {
            
              var h45 = document.createElement("h4");
              var txttt = document.createTextNode("Bitte geben Sie nur Nummern ein");
              h45.appendChild(txttt);
              age.parentNode.appendChild(h45);
              h45.insertBefore(h45,age);
              h45.style.color = "red";
       
            return false;
        }
        else {
            return true;
        }
    }

【问题讨论】：

一般语法是parentNode.insertBefore(newNode, referenceNode)。现在试着解释一下哪个是哪个，当你写h45.insertBefore(h45,age);
基本上，看起来您正在尝试在自己之前插入 h45...

标签： javascript parent addeventlistener blur appendchild

【解决方案1】：

问题出在这一行

      h45.insertBefore(h45,age);

你应该这样做：

      h45.parentNode.insertBefore(age, h45);

【讨论】：

【解决方案2】：

您在 h45 中插入 h45

h45.insertBefore(h45,age);

insertBefore 语法：

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

所以您的变量 age 可能是一个代表警报的 div 容器，并且您已经使用此代码行在 age 内插入 h45

age.parentNode.appendChild(h45);

【讨论】：

【解决方案3】：

h45.insertBefore(h45,age);中的问题您不能在自身内部附加相同的元素。它会创建循环依赖。

 h45.parentNode.insertBefore(age, h45);

见固定 https://plnkr.co/edit/EDkvssWMAcDV0enT2hL2?p=preview

【讨论】：