Adding node before sibling in Javascript

Question

so I'm learning about manipulating Dom elements and adding nodes.

I use this js code:

var parent = document.getElementById('div2');
var newNode = document.createElement('p');
var text = document.createTextNode('Text Node!');
newNode.appendChild(text);
parent.insertBefore(newNode, parent.childNodes[4]);

This is my html within the usual vanilla setup:

<div id="div2">    
    <p> abc </p>
    <p> cde </p>
    <p> efg </p>
    <p> ghi </p>    
</div>

The output is this:

abc
cde
Text Node!
efg
ghi

Isn't this the wrong spot? Isn't this insertBefore childNode[2] before it's inserted? For some reason, when I change the number after childNode, the text is not showing up where I expect it to be? Why is that? Aren't the nodes still starting at 0 ... like arrays? Another example, using childNode[6] places it after efg. I thought that should have been insertBefore childNode[3].

I know the question's probably basic but I can't figure out why. thanks!

T.J. Crowder · Accepted Answer · 2015-03-08 13:46:42Z

1

childNodes includes Text nodes (and comment nodes and such, but you don't have any of those). In your HTML, the whitespace between the elements are Text nodes, so div2 has:

Index 0: A Text node with a newline and some spaces or tabs
Index 1: An Element node for the first paragraph (which contains a Text node with " abc ")
Index 2: A Text node with a newline and some spaces or tabs
Index 3: An Element node for the second paragraph (which contains a Text node with " cde ")
Index 4: A Text node with a newline and some spaces or tabs
Index 5: An Element node for the third paragraph (which contains a Text node with " efg ")
Index 6: A Text node with a newline and some spaces or tabs
Index 7: An Element node for the fourth paragraph (which contains a Text node with " ghi ")
Index 8: A Text node with a newline and some spaces or tabs

Live Example:

var div2 = document.getElementById("div2");
var index, child;
snippet.log("div2's child node types:");
for (index = 0; index < div2.childNodes.length; ++index) {
  child = div2.childNodes[index];
  snippet.log(index + ": " + nodeTypeName(child.nodeType));
}

// Type values from http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558
function nodeTypeName(type) {
  switch (type) {
    case 1:  return "ELEMENT_NODE";
    case 2:  return "ATTRIBUTE_NODE";
    case 3:  return "TEXT_NODE";
    case 4:  return "CDATA_SECTION_NODE";
    case 5:  return "ENTITY_REFERENCE_NODE";
    case 6:  return "ENTITY_NODE";
    case 7:  return "PROCESSING_INSTRUCTION_NODE";
    case 8:  return "COMMENT_NODE";
    case 9:  return "DOCUMENT_NODE";
    case 10: return "DOCUMENT_TYPE_NODE";
    case 11: return "DOCUMENT_FRAGMENT_NODE";
    case 12: return "NOTATION_NODE";
    default:
      return "Unknown node type";
  }
}

<div id="div2">    
    <p> abc </p>
    <p> cde </p>
    <p> efg </p>
    <p> ghi </p>    
</div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

On modern browsers, you can use children instead, which only includes elements, not other kinds of nodes.

edited Mar 8, 2015 at 13:46

answered Mar 8, 2015 at 13:39

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

nyhunter77 Over a year ago

Thanks for that awesome clarification! I'm using a book supposedly written in 2013 and updated in 2014 ... any reason you can think of why they didn't use or even explain using children? I emailed the author but he said he doesn't give help (although it does say in the book to email him questions and comments) ... anyway, I'd upvote your answer but my rep is too low. I appreciate it though!

T.J. Crowder Over a year ago

@nyhunter77: No idea. Even IE8 and Android 2.x's browser have support children.

Collectives™ on Stack Overflow

Adding node before sibling in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related