javascript to insert html into a web page

Question

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.

If I'm understanding your question correctly, for ul and li to be siblings you need to add them as children to the same parent. Here, you are adding the li as a child of ul (using appendChild) — Sean12
– Sean12, Commented Aug 12, 2016 at 3:40

Patrick Moore · Accepted Answer · 2016-08-12 03:40:52Z

2

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

answered Aug 12, 2016 at 3:40

Patrick Moore

13.4k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ram Over a year ago

This effectively does what OP code does. appendChild returns the appended element! .appendChild(firstLi).parentNode.appendChild(secondLi)

historystamp · Accepted Answer · 2016-08-13 18:40:02Z

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

Collectives™ on Stack Overflow

javascript to insert html into a web page

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related