Home/ Questions/Q 6030627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T05:03:51+00:00

If you fiddle with tag string, for example by putting space between >< ,

  • 0

If you fiddle with tag string, for example by putting space between ><, the effect is different.

<!DOCTYPE html>
<head><title>insertBefore error</title></head>
<body>
<div id='myElement'>above this div 3 elements should be inserted
but actually only 2 are, text2 is missing</div>
<script  type="text/javascript">
    referenceTag = document.getElementById('myElement');
    var newElement = document.createElement('div');
    newElement.innerHTML = '<div>text1</div><pre>text2</pre><p>text3</p>';
    for (i=0; i<newElement.childNodes.length; i++) {
        alert(newElement.childNodes[i].tagName);
        //if you comment-out following line there are 3 alerts but otherwise only two.
        referenceTag.parentNode.insertBefore(newElement.childNodes[i],referenceTag);
    }
</script>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you call insertBefore you move the node so it becomes a child of referenceTag.parentNode. At this point it is no longer a child of newElement so newElement.childNodes shrinks by one.

    You then increment i, so you keep skipping elements.

    i.e.

    1. You move node 0
    2. What was node 1 becomes node 0
    3. You move the new node 1 and leave the old node 1 (and current node 0) behind.

    You probably want:

    while (newElement.firstChild) {
        alert(newElement.firstChild.tagName);
        referenceTag.parentNode.insertBefore(newElement.firstChild,referenceTag);
}

    If you fiddle with tag string, for example by putting space between ><, the effect is different.

    The effect is actually the same, but harder to see. Inserting spaces means that instead of having a data structure along the lines of:

    [ elementNode, elementNode, elementNode ]

    You have:

    [ elementNode, textNode, elementNode, textNode, elementNode ]

    Since you skip every other node, and every other node is a text node consisting entirely of white space, you can’t see the effect.

    • 0