How to append text interactively as a list item to a list in the HTML document without storing the list item as a javascript variable?

Question

This is a question about how javascript compiles (I think) and how text gets appended to an HTML document.

I was following an example here because I wanted to append an element to a list in the document interactively.

My html file contains a list:

<ul id="sList"> </ul>

If I write javascript like this:

var textnode = document.createTextNode(s);
var node = document.createElement("li");
node.appendChild(textnode);
document.getElementById("sList").appendChild(node);

Each string (each held in the variable s) gets appended to a list in the document.

I naively thought I could write this in fewer lines.

var node = document.createElement("li");
node.appendChild(document.createTextNode(s));
document.getElementById("sList").appendChild(node);

works as intended, appending each s to a list as a list item, but each fails to appear as a list item properly if I try to reduce the code further by not storing the created "li" as a variable. For example, this script appends text between tags but not as list items:

var textnode = document.createTextNode(s)
var node = (document.createElement("li")).appendChild(textnode)
document.getElementById("sList").appendChild(node)

Similarly, my first attempt was this one-liner:

document.getElementById("sList").appendChild(document.createElement("li").appendChild(document.createTextNode(s)))

which also appends text within the <ul> tags but not as list items.

So I am just wondering how the compiler interprets an appendChild call of a text node to a document.createElement that hasn't been created yet, and whether it's possible to append items to a list without storing them as variables first. This question is out of curiosity, though I suppose it also would be nice to understand the DOM better and how do more with less javascript.

Answer 1

So I am just wondering how the compiler interprets an appendChild call of a text node to a document.createElement that hasn't been created yet...

It's not the compiler, it's the DOM. And the element has been created (you called createElement ); what hasn't happened yet is that you haven't added it to the document, but that's fine, it's still an object, it can still have other objects attached to it.

and whether it's possible to append items to a list without storing them as variables first.

Yes, by using the return value of appendChild , which is the child element that was appended :

list.appendChild(document.createElement('li')).appendChild(document.createTextNode(s));

So there we:

1. Create the li element
2. Append it to the list
3. Use the return value of appending it (the li element) to append the text node

For example, this appends text between tags but not as list items:

 var textnode = document.createTextNode(s) var node = (document.createElement("li")).appendChild(textnode) document.getElementById("sList").appendChild(node) 

That's because you're appending the return value of appendChild to the list. The return value of appendChild is the child that was appended, not the element it was appended to. So node refers to the text node. After appending that node to the li , you then move it to the list on the last line above.