执行 appendChild 时的 Javascript 额外标记

Question

我正在尝试实现以下输出:

  <ul class="deck">
      <li class="card">
          <i class="fa fa-diamond"></i>
      </li>
      <li class="card">
          <i class="fa fa-paper-plane-o"></i>
      </li>

         ...
   </ul>

但是，当我运行我的代码时，我得到:

  <ul class="deck">

      <li>
          <li class="card">
              <i class="fa fa-diamond"></i>
          </li>
      <li>
          <li class="card">
              <i class="fa fa-paper-plane-o"></i>
          </li>
      </li>
         ...
   </ul>

所以你可以看到我得到了一个额外的封闭 <li>标签。我尝试了几种方法，但无济于事。生成此 html 的 JS 是:

const gameDeck = document.querySelector(".deck");
const fragment = document.createDocumentFragment();

for (i = 0; i < cardArray.length; i++) {
    const newElement = document.createElement('LI');
    newElement.innerHTML = "<li class=\"card\"><i 
    class="+cardArray[i]+"></i></li>"

    fragment.appendChild(newElement);
}

gameDeck.appendChild(fragment);

Answer 1

const newElement = document.createElement('LI');

这会创建一个 <li></li> .

innerHTML 属性设置元素内部的内容 所以如果你把 <li> 在 <li> ，你最终会得到 <li><li></li></li>

相反，将 innerHTML 设置为您实际想要在 <li> 中的内容, 不包括 <li>那已经在那里了。此处使用模板字符串以提高可读性。

newElement.innerHTML = `<i class=${cardArray[i]}></i>`

然后，将类也附加到 li 上。两种不同的方法。我更喜欢第二种，特别是如果您想稍后添加一堆类。

newElement.className = 'card'
newElement.classList.add('card')

但是，您可以使用 outerHTML 规避上述所有相反，这符合我的预期 innerHTML做。

const newElement = document.createElement('LI');
newElement.outerHTML = "<li class=\"card\"><i class="+cardArray[i]+"></i></li>"

See this page on MDN for more details on outerHTML.