JavaScript使用appendChild时出现额外<li>标签的问题

看起来你在生成卡片列表时，不小心嵌套了<li>元素——外层是没有class的空<li>，内层才是你想要的带card类的卡片项。这种问题通常出现在动态生成DOM或者字符串拼接HTML的时候，我给你拆解几种常见的错误场景和修复方案：

场景1：JavaScript动态创建DOM元素时出错 #

如果你是用document.createElement()来生成卡片，可能不小心多创建了一层<li>，比如错误的写法会像这样：

const deck = document.querySelector('.deck');
const icons = ['fa-diamond', 'fa-paper-plane-o'];

icons.forEach(icon => {
  // 这里多余创建了一个空的<li>
  const extraLi = document.createElement('li');
  const cardLi = document.createElement('li');
  cardLi.classList.add('card');
  
  const iconEl = document.createElement('i');
  iconEl.classList.add('fa', icon);
  
  cardLi.appendChild(iconEl);
  extraLi.appendChild(cardLi); // 把卡片li嵌套进了空li里
  deck.appendChild(extraLi);
});

修复方案：直接只创建带card类的<li>，不需要额外的空元素：

const deck = document.querySelector('.deck');
const icons = ['fa-diamond', 'fa-paper-plane-o'];

icons.forEach(icon => {
  const cardLi = document.createElement('li');
  cardLi.classList.add('card');
  
  const iconEl = document.createElement('i');
  iconEl.classList.add('fa', icon);
  
  cardLi.appendChild(iconEl);
  deck.appendChild(cardLi); // 直接把卡片li挂载到deck下
});

场景2：字符串拼接HTML时重复写了<li>标签 #

如果是用字符串拼接的方式生成HTML结构，可能不小心多写了一对<li>标签，比如：

const icons = ['fa-diamond', 'fa-paper-plane-o'];
let deckHTML = '<ul class="deck">';

icons.forEach(icon => {
  // 这里多包裹了一层<li>
  deckHTML += '<li>';
  deckHTML += `<li class="card"><i class="fa ${icon}"></i></li>`;
  deckHTML += '</li>';
});

deckHTML += '</ul>';
document.body.innerHTML = deckHTML;

修复方案：去掉多余的<li>包裹，直接拼接卡片项：

const icons = ['fa-diamond', 'fa-paper-plane-o'];
let deckHTML = '<ul class="deck">';

icons.forEach(icon => {
  deckHTML += `<li class="card"><i class="fa ${icon}"></i></li>`;
});

deckHTML += '</ul>';
document.body.innerHTML = deckHTML;

场景3：模板引擎/框架中的错误（比如Vue、Handlebars等） #

如果你在用前端框架或模板引擎，可能是模板结构里不小心嵌套了<li>，比如Vue模板的错误写法：

<ul class="deck">
  <!-- 这里的v-for错误地放在了外层空<li>上 -->
  <li v-for="icon in icons">
    <li class="card"><i :class="['fa', icon]"></i></li>
  </li>
</ul>

修复方案：把循环直接绑定到带card类的<li>上：

<ul class="deck">
  <li v-for="icon in icons" class="card">
    <i :class="['fa', icon]"></i>
  </li>
</ul>

总的来说，核心问题就是你生成的卡片项被额外的<li>嵌套了，检查一下你的代码里有没有重复创建/拼接<li>的逻辑，去掉多余的那一层就可以解决啦。

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