我正在關注 Javascript 教程，我必須在div使用 Javascript 的內部添加 100 個按鈕。
起初，我嘗試做這樣的事情：
const btn = document.createElement('button');
const div = document.querySelector('div');
btn.innerText = 'Hey!';
for (let i = 0; i < 100; i ) {
div.appendChild(btn);
}
這最終只制作了 1 個按鈕。但是，如果我重復相同的代碼，它只會在前一個代碼之后附加按鈕。但是，這種方法：
for (let i = 0; i < 100; i ) {
const btn = document.createElement('button');
const div = document.querySelector('div');
btn.innerText = 'Hey!';
div.appendChild(btn);
}
做這項作業。我似乎無法理解為什么第二個有效而第一個無效。
據我了解，第一種方法似乎更好，因為我沒有一遍又一遍地制作相同的變數。然而，這最終只會讓我只制作一個按鈕而不是 100 個。
uj5u.com熱心網友回復：
第一個例子不起作用，因為它就是方法的appendChild作業原理。根據MDN。它只是將節點/元素從其當前位置移動到指定位置。所以你的第一個例子只是更新一個節點的位置，因為你只創建了一個 div
第二個示例div每次都會創建，因此它是一個新元素，存盤在您的父元素中。
uj5u.com熱心網友回復：
創建元素的代碼是document.createElement，您在第一個示例中將其稱為，因此只創建了一個元素。
appendChild不會創建元素，它會將已創建的元素附加到某個父元素。
如果它已經被附加，那么什么都不做
uj5u.com熱心網友回復：
因為在第一種情況下，您嘗試附加同一個 DOM 物件 100 次，但每次都必須創建一個新物件
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/489796.html
標籤：javascript