Question

Given this code:

Element elem  = new Element.html("<p>This is a paragraph.</p>");

document.body.append(elem);
document.body.children.add(elem);
document.body.nodes.add(elem);

The results are the same when I add to body.children or to body.nodes. What is the difference between the two? Which is better?

Answer 1

I’ll try to explain it easily.

Let’s assume this HTML snippet:

<div>
  Hey!
  <span>How is it going?</span>
</div>

Now, the thing is that the children property comes from the Element class. It returns a list of other Element objects:

List<Element> children

So, elements can have children who are elements, and so forth.

But then we have the nodes property, which comes from the Node class. It returns a list of other Node objects:

List<Node> nodes

So, nodes can have child nodes who are nodes themselves too.

The question you should ask is what’s the difference between a node and an element?

Let me add some comments to our previous HTML snippet:

<div> <!-- Element -->
  Hey! <!-- Node -->
  <span> <!-- Element -->
    How is it going? <!-- Node -->
  </span>
</div>

Remember, Element extends Node, which means that <div> and <span> are not only elements, but also nodes! Everything is a node in HTML. In fact, even comments <!-- foo --> are nodes!

When you access the nodes property, you will retrieve a list of nodes, basically a list of everything under it, including HTML comments and text.

Retriving the nodes for the <div> tag above would return one Node (“hey!”) and one Element (<span>). However, retrieving the children property would only return a list with a single Element (<span>).

So, nodes literally contains everything, including elements, text nodes, comments, document types and more.

To answer your question now:

 document.body.append(elem);
 document.body.children.add(elem);

These two are the same, the first is just a wrapper for convenience.

When you add to nodes or children, there isn’t really much difference. However, if you retrieve the property, the result can differ. I would generally advise you to use children because the results are more what you would expect.

Implementation wise, there are little differences as Kyrra mentioned, but nothing too concerning.