javascript - 为什么在函数之外创建节点时只有最后一个附加有效？

Question

let items = document.querySelector('.items');    // class of ul tag
let $li = document.createElement("li");

function add(item) {
  $li.textContent = item;
  items.append($li);
}

add('soup');
add('shampoo');

如果在函数中使用 createElement 创建节点，则正常反映。但是，我很好奇为什么像现在这样在函数之外创建 li 节点时只添加 append 的最后一个元素的详细原因。

标签： javascript

Answer 1

您应该每次在函数内创建 li 节点。否则它将引用旧节点并仅更新该节点的 innerHTML。

let items = document.querySelector('.items');    // class of ul tag


function add(item) {
  let $li = document.createElement("li");
  $li.textContent = item;
  items.append($li);
}

add('soup');

add('shampoo');