# Does the following Javascript function use the appendChild correctly?

I want to be able to append a value to the bottom of a list and I set a node to create and element of <li> and then set the text document node to my value. Then I append the node to the node with appendChild(textnode) and then finally add the node by calling getElementById which I am wondering if that is the way that it should be done.

Code:

<script>
function myFunction()
{
var node     = document.createElement("li");
var textnode = document.createTextNode("Water -- again");

node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

-
The code is straightforward enough that you don't need to describe exactly what it does. A simple "How can I improve this" or "Is this the correct way to add an element" would suffice :) –  Koveras Mar 31 at 17:51
@Koveras I agree with you, but there have been Meta discussions where people judge a "good question" as one which attempts to explain what the code does. A question which just says "How can I do this better?" tends to be frowned upon (at least in the abstract). –  asteri Mar 31 at 20:25

To answer the question in the title: Yes, that is a correct use of appendChild.

However, in your description you ask if it should be done like that: No, it doesn't have to be done like that.

If you mean to ask about best practices (opinion): Use a descriptive function name and don't hard-code any values in a function.

If you are wondering about adding text content before or after appending the LI node to the list in the DOM. It doesn't matter: both before and after adding the node to the DOM you can manipulate it.

You could also do it like so:

function addToList(listId, text){
var nd = document.createElement('li');
var ls = document.getElementById(listId);
ls.appendChild(nd);
nd.textContent = text;
}

-
If I was going to just append an item to a new page at the bottom of the page would I use appendChild with the HTML node. –  Doug Hauf Apr 2 at 12:57
@DougHauf That depends. Normally there are no items below the BODY node but you can do it there. I think it is browser specific if the viewer would actually see what you've added. I would recommend using appendChildon the BODY node. (document.body.appendChild(document.createElement('<div>This is the footer</div>'));) –  Maarten Wolzak Apr 3 at 9:30

An opinion question, fortunately this one is straight forward.

What you are doing is straightforward and correct, the other way would be to manipulate the inner HTML of myList and add the item that way.

I am not a fan of your question, it probably is not real code; myFunction, and a hardcoded "Water -- again" give that away. CodeReview is more valuable if you give use the real codez.

-
Fan or no fan, this question now appears in the Hot Network Questions list. (with 11.722 hotness points) –  Shadow Wizard Mar 31 at 20:13

That's perfectly fine, or you can do:

<script>
function myFunction()
{
var node = document.createElement("li");

node.textContent = "Water -- again";

document.getElementById("myList").appendChild(node);
}
</script>

-