Append and prepend elements with pure JavaScript

Prepending and appending stuff in pure JavaScript is fast and effortless.

Appending is not hard at all, there is an appendChild() method in JavaScript. Prepending an element is a bit harder but not really.


The following will create a new element and jug it into an existing element:

// Grab an element
var el = document.getElementById('thingy'),
    // Make a new div
    elChild = document.createElement('div');

// Give the new div some content
elChild.innerHTML = 'Content';

// Jug it into the parent element

The same node can’t be present twice in the DOM, so if an existing element is appended, it’ll be removed from it’s original position. If this is not desired, try the .cloneNode().

MDN article on appendChild


For prepending insertBefore() method needs to be used:

var el = document.getElementById('thingy'),
    elChild = document.createElement('div');
elChild.innerHTML = 'Content';

// Prepend it
el.insertBefore(elChild, el.firstChild);

MDN article on insertBefore


JS Bin

Performance compared to jQuery

The performance is breathtaking compared to jQuery’s .append() method, higher the dongle the better it is:

Test from JSPerf
Test from JSPerf


Both of these methods work in all browsers. As I learn more and more native JavaScript it apparent that jQuery is not so necessary always.


  • trhtrh says:


  • Anonymous says:

    This site looks like shit.

  • anon says:

    This comment looks like shit

  • The P Love says:

    Cool, thanks for this. Fuck jQuery right? Slow and bloated. The more pure javascript the better!

  • The P Love says:

    Was able to use this snippet to build a pure CSS / Javascript fade image slider.

  • Nell says:

    Love the performance review between javaScript and jQuery ! :D
    Speed always wins over huge library load times . Glad I found this helpful article. ;)

  • Anonymous says:


  • Sher says:

    Hooray! The other javascript only solutions were not this clear and concise. Trying to be jquery free.

  • Sam says:

    Hey thanks! The documentation was clear and concise with some background research as well :)

    VERY out of this world layout and color scheme. Do you bro. Do you.

  • tysiom says:

    fhfghfg fghrtwfjfg fghhd hfdfdghdfgh fdtrjtyjjytyjtj

  • Anonymous says:


  • Anonymous says:

    edet aqra ketaːb ʕan tariːx al-niswan eb-fransa
    Hijazi Arabic (Medina) ˈana marra aˈħubb al-ɡiraːja ˈlamma ruħt al-ˈmaktaba ma liɡiːt haːda l-kitaːb al-ɡadiːm kunt abɣa aɡra kitaːb ʕan tariːx al-ħariːm fi (Damascus) ʔana ktiːr b’ħəbb lᵊ-ʔraːje ˈlamma ˈrəħt ʕal-ˈmaktabe ma laʔeːt ha-l-ᵊkˈtaːb lᵊ-ʔˈdiːm kaːn ˈbaddi ʔra ktaːb ʕan taˈriːx ᵊl-ˈmara bᵊ-ˈfraːnsa
    Lebanese Arabic (Beirut?) ktiːr bħibb il-ʔiˈreːje ˈlamma ˈreħit ʕal-ˈmaktabe ma lʔeːt ha-l-ikˈteːb le-ʔˈdiːm keːn ˈbaddi ʔra kteːb ʕan teˈriːx il- (Jerusalem) ‘ʔana ba’ħebb l-ᵊʔ’raːje ktiːr ˈlamma ˈruħᵊt ʕal-ˈmaktabe ma laˈʔeːtᵊʃ ha-l-ᵊkˈtaːb ᵊl-ʔaˈdiːm kaːn ˈbeddi ˈʔɑʔrɑ ktaːb ʕan taˈriːx ᵊl-ˈmɑrɑ fi fˈransa

  • Anonymous says:

    followed on twitter, love the site.

Club-Mate, the beverage →