為什麼代碼做出不同的輸出並且幾乎相同的輸入？輸入：
var Add = document.getElementById('AddElement'); //the button
var Element = document.getElementById('element'); // the input text
var ListParent = document.querySelector('ul');
Add.addEventListener('click', function(){
var AddText = document.createElement('li').appendChild(document.createTextNode("hello"));
ListParent.appendChild(AddText);
})
輸出：
第一次點擊：你好
第二次點擊：你好你好
Input:
var Add = document.getElementById('AddElement');
var Element = document.getElementById('element');
var ListParent = document.querySelector('ul');
Add.addEventListener('click', function(){
var AddText = document.createElement('li');
AddText.appendChild(document.createTextNode('hello'));
ListParent.appendChild(AddText);
})
輸出：第一次點擊：
第二次點擊：
appendChild 返回附加節點：
const div = document.createElement('div');
const parent = document.createElement('div');
const result = parent.appendChild(div);
console.log(result === div);所以當你做
var AddText=document.createElement('li').appendChild(document.createTextNode("hello"));
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
放入的值addText是創建的文本節點。與...對比
var AddText = document.createElement('li');
它是<li>，而不是文本節點。
因此，使用第一種方法，創建的<li>不會被使用（並且可能不是您想要的）。
如果你想使用<li>，和超薄你的代碼了，分配到.textContent的<li>來代替。
Add.addEventListener('click', function(){
ListParent.appendChild(document.createElement('li'))
.textContent = element.value;
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句