Javascript 当我重复在Div中添加新元素时，为什么会出现“HierarchyRequestError”？

考虑下面的代码。它第一次起作用，但在按下按钮后不起作用。我收到以下错误消息：

未捕获的HierarchyRequestError:无法在上执行“appendChild” “节点”：新的子元素包含父元素

函数addElement（）{
var txt=''+
''+
'';
var ni=document.getElementById（'school'）；
ni.innerHTML=txt；
ni.儿童（ni）；
}

您试图在其内部附加一个元素。JavaScript不允许这样做。

您可以设置innerHTML，也可以使用ni.appendChild（）添加HTML DOM节点。选择其中一个，而不是两个

---

错误是因为您试图执行ni.appendChild（ni），因此消息应该是明显的。

这是错误的

ni.appendChild（ni），您不能进行自我追加。您可以将标记附加到其父项中。在这里，我们可以将输入标记附加到其父项中

function addElement() {
    var ni = document.getElementById('school');

    var firstInput = createInput('school');
    ni.appendChild(firstInput);

    var seconInput = createInput('degree');
    ni.appendChild(seconInput);

    var thirdInput = createInput('gradYear');
    ni.appendChild(thirdInput);
}

function createInput(name){
    var input = document.createElement('input'); // creating the input
    input.setAttribute('type', 'text'); // setting the type attribute
    input.setAttribute('name', name+'[]');
    return input;
}

工作
ni.appendChild（ni）wtf？不能将元素附加到自身。只需删除最后一行。当您执行
ni.innerHTML
操作时，您在技术上已经添加了HTML子项，然后您尝试再次使用append-child，但将其附加到自身。您可以将其保留为just.innerHTML，或者更恰当地创建一个新节点（不命名为ni），并将其附加到“ni”中。
function addElement() {
    var ni = document.getElementById('school');

    var firstInput = createInput('school');
    ni.appendChild(firstInput);

    var seconInput = createInput('degree');
    ni.appendChild(seconInput);

    var thirdInput = createInput('gradYear');
    ni.appendChild(thirdInput);
}

function createInput(name){
    var input = document.createElement('input'); // creating the input
    input.setAttribute('type', 'text'); // setting the type attribute
    input.setAttribute('name', name+'[]');
    return input;
}