为什么insertBefore不工作?

时间:2018-01-30 11:27:59

标签: javascript parent addeventlistener blur appendchild

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

3 个答案:

答案 0 :(得分:1)

问题出在这一行

      h45.insertBefore(h45,age);

您应该执行以下操作:

      h45.parentNode.insertBefore(age, h45);

答案 1 :(得分:0)

您正在h45中插入h45

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

insertBefore语法:

age.parentNode.appendChild(h45);

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

stlink-v2.cfg

答案 2 :(得分:0)

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

 h45.parentNode.insertBefore(age, h45);

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