trouble adding new <li> to <ul> onclick with javascript

Question

i'm trying to add a list element to an existing ul using a function from an onclick like this:

<span style="color:red;">Bob</span>

If i hard code it in the HTML it works fine:

<ul id="LsUL">
<li><span style="color:blue;">Joe</span></li>
<li><span style="color:green;">Frank</span></li>
</ul>

But using a function it dose not work

function changeText2() {
  var entry = document.createElement('li');
  entry.appendChild(document.createTextNode('<span style="color:red;">Bob</span>'));
  document.getElementById("LsUL").appendChild(entry);
}
changeText2();

<ul id="LsUL">
  <li><span style="color:blue;">Joe</span></li>
  <li><span style="color:green;">Frank</span></li>
</ul>

The output should be like this:

Joe (blue)
Frank (green)
bob (red)

But I get this:

Joe (blue)
Frank (green)
<span style="color:red;">bob</span>

I cant seem to get it to work any ideas? Thanks.

createTextNode inserts text, not HTML. Try insertAdjacentHTML instead — mplungjan
– mplungjan, Commented Mar 22, 2020 at 8:11

CertainPerformance · Accepted Answer · 2020-03-22 08:11:42Z

4

createTextNode will do exactly what it sounds like - create a text node. Whatever you pass in, it will always create a text node, composed only of text - it won't create child elements.

Element nodes can contain text nodes, but not the other way around - text nodes can't contain anything but text.

If you want to set the new li's HTML, use innerHTML:

var entry = document.createElement('li');
entry.innerHTML = '<span style="color:red;">Bob</span>';
list.appendChild(entry);

You can also do it all at once with insertAdjacentHTML:

list.insertAdjacentHTML('beforeend', '<li><span style="color:red;">Bob</span></li>');

answered Mar 22, 2020 at 8:11

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

m casky Over a year ago

Thank you very much i looked all over for an answer!

Collectives™ on Stack Overflow

trouble adding new <li> to <ul> onclick with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related