javascript将html插入网页

Question

我使用Javascript将两个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

在您的示例中，您的逻辑是＆＃34;结合了＆＃34;＆＃34;是有缺陷的。它将一个孩子添加到另一个孩子，而不是两个孩子在同一级别。

  // 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);

Answer 2

以下是我最终的结果：

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

  document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi)

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

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


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