javascript 将 html 插入网页

Question

我正在使用 Javascript 将两个 li 元素插入网页中。第二个 li 嵌套在第一个 li 内。

问题是我可以创建一个具有同一级别的两个 li 元素的数据结构吗？我可以调整代码来执行两次插入，但我很好奇是否可以通过数据结构完成每一项操作。

这是我插入 li 元素的代码:

  // Buid data structure
  // Create first <li> note
  var firstLi = document.createElement("lI");
  var node = document.createTextNode("   ");
  firstLi.appendChild(node);

  // Create second <li> node
  var secondLi = document.createElement("LI");   

  // Append pagination
  // End of with three paginations on page with multipage document
  secondLi.appendChild(clone);                      

  // combine li's
  firstLi.appendChild(secondLi); 

  // Append the cloned <span> element to follow [pulldown]
  document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi);

在蓝色突出显示的线上方，您将看到嵌套的 li。我希望 li 与封闭的 ul 处于同一级别。

Answer 1

在你的例子中，你的“组合李”的逻辑是有缺陷的。它将一个作为子级添加到另一个中，而不是同一级别的两个子级。

  // combine li's
  firstLi.appendChild(secondLi); 

  // Append the cloned <span> element to follow [pulldown]
  document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi);

应该变成:

  // combine li's
  // remove this: firstLi.appendChild(secondLi); 

  // Append the cloned <span> element to follow [pulldown]
  document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi).appendChild(secondLi);