Append as fourth child?

[unemployment]

How can I append something as a fourth child?  I've only used first and last child in the past.

[Adam]

You need to call the DOM method insertBefore on the parent element, passing in the new node and the target node to insert before:

 

<script type="text/javascript">
window.onload = function() {
    // Create the new node
    var li = document.createElement('li');
    li.appendChild(document.createTextNode('New Child 4'));

    // Insert before the 4th (index 3) child
    var ul = document.getElementById('test');
    ul.insertBefore(li, ul.children[3]);
}
</script>

<ul id="test">
    <li>Child 1</li>
    <li>Child 2</li>
    <li>Child 3</li>
    <li>Child 4</li>
    <li>Child 5</li>
</ul>

 

 

[unemployment]

You need to call the DOM method insertBefore on the parent element, passing in the new node and the target node to insert before:

 

<script type="text/javascript">
window.onload = function() {
    // Create the new node
    var li = document.createElement('li');
    li.appendChild(document.createTextNode('New Child 4'));

    // Insert before the 4th (index 3) child
    var ul = document.getElementById('test');
    ul.insertBefore(li, ul.children[3]);
}
</script>

<ul id="test">
    <li>Child 1</li>
    <li>Child 2</li>
    <li>Child 3</li>
    <li>Child 4</li>
    <li>Child 5</li>
</ul>

 

Thank you. That worked