JavaScript使用createTextNode、createElement向标签内插入文本异常问题

错误原因 #

你现有的代码将li元素和文本节点都直接作为子元素插入到了ul#list节点中，二者是同级关系，并非你期望的父子嵌套关系，所以会出现空li和文本分开显示的问题。

修复方法 #

调整元素插入逻辑，先将文本节点插入到新建的li内部，再把带文本的li整体插入到列表中：

function Adding(){ 
  let li = document.createElement('li') 
  let inputValue = document.getElementById('text').value; 
  let t = document.createTextNode(inputValue); 
  // 先将文本插入li内部
  li.appendChild(t);
  // 再将完整的li插入列表
  document.getElementById('list').appendChild(li); 
}
let btn = document.getElementById('btn'); 
btn.addEventListener('click', Adding)

可选优化写法 #

你也可以不用手动创建文本节点，直接给li的textContent属性赋值即可实现相同效果，代码更简洁：

function Adding(){ 
  let li = document.createElement('li') 
  li.textContent = document.getElementById('text').value;
  document.getElementById('list').appendChild(li);
}
let btn = document.getElementById('btn'); 
btn.addEventListener('click', Adding)

内容的提问来源于stack exchange，提问作者Phoenixia