如何用JavaScript创建虚拟节点添加<li>至原有<ul>列表后

你完全可以用DocumentFragment来作为虚拟容器，它是一个轻量的文档片段，不会被插入到真实DOM中，只会把它包含的子节点追加到目标元素里，完美解决多余div的问题。

方法1：使用DocumentFragment（推荐） #

let wrap = document.querySelector('.wrap');
let fragment = document.createDocumentFragment();
let str = `
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
`;

// 创建临时div解析HTML，再把li转移到fragment
let tempDiv = document.createElement('div');
tempDiv.innerHTML = str;
while (tempDiv.firstChild) {
  fragment.appendChild(tempDiv.firstChild);
}

// 直接追加fragment，只会插入里面的li
wrap.appendChild(fragment);

方法2：用insertAdjacentHTML直接追加 #

更简洁的方式，不需要任何容器，直接把HTML字符串追加到ul的末尾：

let wrap = document.querySelector('.wrap');
let str = `
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
`;

// 'beforeend'表示追加到元素内部的最后位置
wrap.insertAdjacentHTML('beforeend', str);

方法3：循环创建单个

节点 #

如果接口返回的是数组数据，也可以逐个创建li节点并追加：

let wrap = document.querySelector('.wrap');
const data = ['5555', '6666', '7777', '8888'];

data.forEach(text => {
  let li = document.createElement('li');
  li.textContent = text;
  wrap.appendChild(li);
});

原来的代码问题在于直接把承载li的div追加到ul里，导致DOM结构多出不必要的div。上面的几种方法都能避免这个问题，其中insertAdjacentHTML是最简洁的实现，DocumentFragment适合需要批量操作节点的场景。

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