How can I implement prepend and append with regular JavaScript?

javascript append prepend
Yosef picture Yosef · Aug 2, 2010 · Viewed 137.3k times · Source

How can I implement prepend and append with regular JavaScript without using jQuery?

Answer

Pat picture Pat · Aug 2, 2010

Here's a snippet to get you going:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChild will give us a reference to the first element within theParent and put theKid before it.

Related questions

.append(), prepend(), .after() and .before()

I am pretty proficient with coding, but now and then I come across code that seems to do basically the same thing. My main question here is, why would you use .append() rather then .after() or vice verses? I have …

Read More
Adding code to a javascript function programmatically

I'm attempting to customize an existing JS library without modifying the original JS code. This code loads in a few external JS files which I do have access to, and what I'd like to do is change one of the …

Read More
How to append something to an array?

How do I append an object (such as a string or number) to an array in JavaScript?

Read More