How can I implement prepend and append with regular JavaScript?

Question

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

Selfabuse

I don't understand what you mean. – Blithe

@GenericTypeTea: So did I at about the same time... I'll leave it alone now! – Judaist

@Mark - Your edit was better :). – Outdate

Answer 1

Perhaps you're asking about the DOM methods appendChild and insertBefore.

parentNode.insertBefore(newChild, refChild)

Inserts the node newChild as a child of parentNode before the existing child node refChild. (Returns newChild.)

If refChild is null, newChild is added at the end of the list of children. Equivalently, and more readably, use parentNode.appendChild(newChild).

Foxtail

so prepend is basically this then function prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); } – Montpelier

Answer 2

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.

Heartburning

Thanks, why for prepend just use insertBefore without create additional div? like Grumdrig answer? – Selfabuse

this creates an element and adds it to the dom, append and prepend work differently – Reeba

I get this one compared to Grumdig's answer – Gismo

It's 2015. Can we have a built in prepend() method yet? – Discriminating

Node.append or node.appendChild are void methods, use insertBefore(node,null) instead – Caporetto

Answer 3

You didn't give us much to go on here, but I think you're just asking how to add content to the beginning or end of an element? If so here's how you can do it pretty easily:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

Pretty easy.

Impersonate

Nice, just what I was looking for. – Reeba

@Impersonate This method will force browser to parse all the existing children again. In the above solutions Browser just have to attach the given child to the document. – Lawgiver

Answer 4

If you want to insert a raw HTML string no matter how complex, you can use: insertAdjacentHTML, with appropriate first argument:

'beforebegin' Before the element itself. 'afterbegin' Just inside the element, before its first child. 'beforeend' Just inside the element, after its last child. 'afterend' After the element itself.

Hint: you can always call Element.outerHTML to get the HTML string representing the element to be inserted.

An example of usage:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

Caution: insertAdjacentHTML does not preserve listeners that where attached with .addEventLisntener.

Backcourt

"insertAdjacentHTML does not preserve listeners..." What listeners? It's HTML, so there aren't any elements yet to bind. If you were referring to existing elements inside foo, then that's not a true statement. The whole point of .insertAdjacentHTML is that it does preserve listeners. You're maybe thinking of .innerHTML += "...", which destroys the old DOM nodes. – Ketti

@Ketti You are right that statement may be interpreted in multiple ways, what I actually meant were the DOM nodes freshly created with insertAdjacentHTML (not the root nor the existing descendants of the root) – Backcourt

Answer 5

I added this on my project and it seems to work:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

Example:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

Sankaran

Answer 6

In order to simplify your life you can extend the HTMLElement object. It might not work for older browsers, but definitely makes your life easier:

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

So next time you can do this:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

Covenanter

what if the node has no child nodes? In that case firstChild will be null – Hulse

prepend is already exists, see ParentNode.prepend(), so to make prependChild it is enough to call prnt.prepend(chld) – Ottillia

Answer 7

Here's an example of using prepend to add a paragraph to the document.

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

result:

<p>Example text</p>

Decima

Answer 8

In 2017 I know for Edge 15 and IE 12, the prepend method isn't included as a property for Div elements, but if anyone needs a quick reference to polyfill a function I made this:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

Simple arrow function that's compatible with most modern browsers.

Catharine

Answer 9

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

If referenceElement is null, or undefined, newElement is inserted at the end of the list of child nodes.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

Examples can be found here: Node.insertBefore

Thirteen

Answer 10

You can also use unshift() to prepend to a list

Speer

Answer 11

document.write() is not a good practice, some browsers like Chrome give you a warning if you use it, and it may be a bad solution if you are providing it to a customer, they don't want to use your code and see warnings in the debug console!

Also jQuery may also be a bad thing if you are giving your code to a customer who already uses jQuery for other functionality on their site, there will be a conflict if there is already a different version of jQuery running.

If you want to insert content into an iframe, and do that with pure JS, and with no JQuery, and without document.write(), I have a solution.

You can use the following steps

1.Select your iframe:

var iframe = document.getElementById("adblock_iframe");

2.Create an element that you want to insert into the frame, let's say an image:

var img = document.createElement('img');
img.src = "https://server-name.com/upload/adblock" + id + ".jpg";
img.style.paddingLeft = "450px";
//scale down the image is we have a high resolution screen on the client side
if (retina_test_media == true && high_res_test == true) {
    img.style.width = "200px";
    img.style.height = "50px";
} else {
    img.style.width = "400px";
    img.style.height = "100px";
}
img.id = "image";

3.Insert the image element into the iframe:

iframe.contentWindow.document.body.appendChild(img);

Flaxman

Answer 12

We finally have a built-in prepend() method supported by all modern browsers

parent.prepend(newChild)

https://caniuse.com/dom-manip-convenience

Pledget

Answer 13

This is not best way to do it but if anyone wants to insert an element before everything, here is a way.

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);

Topsyturvydom