當我重複在Div內添加新元素時，爲什麼會出現`HierarchyRequestError`？

考慮下面的代碼。它第一次工作，但不按下按鈕。我收到以下錯誤消息：當我重複在Div內添加新元素時，爲什麼會出現`HierarchyRequestError`？

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

function addElement() { 
var txt='<input type="text" name="school[]"> '+ 
    '<input type="text" name="degree[]">'+ 
    '<input type="text" name="gradYear[]">'; 

    var ni = document.getElementById('school'); 
    ni.innerHTML = txt; 
    ni.appendChild(ni); 
} 


<input type="button" name="add" value="Add School" onClick="addElement()"> 

<div id="school"> 

</div>

來源

2014-02-21 Ed Pudol

+15

'ni.appendChild（NI）;'跆拳道？ –

你不能附加一個元素給自己。只要刪除最後一行。 –

當你做'ni.innerHTML'時，你在技術上已經添加了HTML子元素，那麼你試圖再次追加子元素，但將其附加到自身。你可以用.innerHTML或更適當地創建一個新節點（不叫ni），並把它附加到「ni」。 – nerdwaller

您試圖元素追加內部本身。 JavaScript不會讓你這樣做。

來源

2014-02-21 14:51:31 StephenRios

您可以設置innerHTML，也可以使用ni.appendChild（）添加HTML DOM節點。選擇一個或另一個，而不是兩個。

錯誤是因爲您試圖做ni.appendChild（ni），對此消息應該是顯而易見的。

來源

2014-02-21 14:51:55 jgitter

這是錯的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; 
}

工作DEMO

來源

2014-02-21 15:08:59

當我重複在Div內添加新元素時，爲什麼會出現`HierarchyRequestError`？

回答

相關問題