Question

我写了下面的代码。我试图将元素“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;
        }
    }

Answer 1

问题出在这一行

      h45.insertBefore(h45,age);

您应该执行以下操作：

      h45.parentNode.insertBefore(age, h45);

Answer 2

您正在h45中插入h45

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

insertBefore语法：

age.parentNode.appendChild(h45);

所以你的变量年龄可能是一个代表警报的div容器，你已经在这个代码行中插入了h45年龄

stlink-v2.cfg

Answer 3

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

 h45.parentNode.insertBefore(age, h45);

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

为什么insertBefore不工作？

3 个答案: