HTMLElement.insertBefore/appendChild behavior test

This test shows, at least in Chrome, that the native browser implementations of the DOM manipulation methods, when used on already inserted elements, remove those elements from their previous positions when re-inserting them.

by Derija93

HTML

<div id="parent">
    <div id="test1">Test 1</div>
    <div id="test2">Test 2</div>
    <hr />
    <div id="test3">Test 3</div>
    <div id="test4">Test 4</div>
</div>

JavaScript

(function(){
    var test1 = document.getElementById('test1'),
        test2 = document.getElementById('test2'),
        test3 = document.getElementById('test3'),
        test4 = document.getElementById('test4'),
        parent = document.getElementById('parent');
    parent.appendChild(test1);
    parent.insertBefore(test4, test3);
})();