Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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.

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

  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
}
</script>
share|improve this question
1  
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
1  
@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

3 Answers 3

up vote 4 down vote accepted

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;
}
share|improve this answer
    
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.

share|improve this answer
    
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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.