CODEWITHSUNDEEP
javascripthtml
historystamp
historystamp

Reputation: 1478

javascript to insert html into a web page

I'm using Javascript to insert two li elements into a web page. The second li gets nested inside the first.

The question is can I create a data structure that have both li elements at the same level. I could adjust me code to do two inserts, but I'm curious if I can do every by a data structure.

Here is my code for inserting the li elements:

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

Just above the blue highlighted line you will see the nested li. I want to have the li at the same level as the enclosing ul. indented li's

Upvotes: 0

Views: 126

Answers (2)

historystamp
historystamp

Reputation: 1478

Here is what I ended up with:

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

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13344

In your example, your logic for "combining li's" is flawed. It's adding one as a child to the other, not two children at the same level.

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

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

should become:

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

Upvotes: 2

Related Questions