Can I insert elements to the beginning of an element using .appendChild()?

Extending to advanced methods and compatibility

Non-linear hilarity with PrototypeJS

If you're a PrototypeJS ninja, you have the Element.insert(container, {top: newChild}) in your arsenal. It's like a katana, sharp and precise:

$('parent').insert({top: new Element('span')}); // slicing through DOM complexities as easy as sushi


Modern ways for the enlightened

JavaScript has grown up, so have the methods available. To get to the start of the line in the club, use parent.prepend(newChild). Always remember to check the bouncer's compatibility list, aka caniuse.com, before you step in.

Sibling manipulation without family drama

To rearrange siblings without causing any family rift, use child1.before(newChild) and child1.after(newChild). It's like swapping seats at the dinner table, all without Mom knowing:

var currentChild = document.getElementById('currentChild');
var newSibling = document.createElement('div');
currentChild.before(newSibling); // shhh... don't tell mom!


Old out, new in

To replace an old, worn-out code with a fresh one, child.replaceWith(newChild) is your best pal. It's as easy as trading an old car with a new one:

var tiredElement = document.getElementById('tiredElement'); // it's been a long journey
var shinyNewElement = document.createElement('div');
tiredElement.replaceWith(shinyNewElement); // out with the old, in with the new!


Watch your languages!

Remember that when you gossip (passing string values) about DOM elements they become text nodes. They lose their HTML powers:

parentElement.insertAdjacentHTML('afterbegin', '<span>Some text</span>');


Fashion over function with CSS

Sometimes, style rules over function. If layout control is what you need, let CSS walk the ramp, rather than exhausting JavaScript.

Debunking common misconceptions and problems

The .appendChild() mythology

.appendChild() has been misunderstood like quantum physics, often expected to insert an element anywhere. Let's clarify- it ALWAYS adds as the last child.

Dealing with empty nests

Rushing to add to an empty parent using .insertBefore(), without checking, might make JavaScript angry. Better safe than sorry:

if (parentElement.firstChild) {
    parentElement.insertBefore(newChild, parentElement.firstChild); // looks like we have siblings!
} else {
    parentElement.appendChild(newChild); // it's an only child...for now.
}


Even more weapons to your arsenal

Taking the whole squad in

For multiple values insertion, like inviting the entire gang, use the spread operator or pass in multiple arguments. It's fun and powerful:

parentElement.prepend(...arrayOfNodes); // c'mon gang, let's have fun!


Optimizing your weapons

DOM manipulations can be as tricky as a double-edged sword. Excessive use might slow down your page. Choose the most efficient one, whether appendChild, insertBefore, or any other DOM API.

Precision aiming with down() in PrototypeJS

The down() method in PrototypeJS hones your targeting skills. Precise modification of elements within containers is no longer an issue:

$('parentElement').down('.child-class').insert({top: new Element('span')}); // 10 points if you get it right!
