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.

Answer 2

基本上你是在li插入newElement，它已经是li。试试这个：

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

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

gameDeck.appendChild(fragment);

Answer 3

创建LI元素时，它已经包含<li>和</li>标记。不要再添加它们了。

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

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

    fragment.appendChild(newElement);
}

gameDeck.appendChild(fragment);

Answer 4

您正在创建一个LI元素，然后将<li>元素放入其中。就这样做：

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

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

      fragment.appendChild(newElement);
  }

  gameDeck.appendChild(fragment);

Answer 5

你正在创建一个li，然后添加“li”的内部html - 尝试删除innerHTML中的li

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

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

    fragment.appendChild(newElement);
}

gameDeck.appendChild(fragment);

执行appendChild时的Javascript额外标记

5 个答案: