Add DOM elements to beginning of parent

Question

I have the following javascript working to insert AJAX responses into a div with id results:

document.getElementById("results").innerHTML=xmlhttp.responseText;

However, this adds all new elements after those already present. I need for the new elements to be inserted before everything else.

I know this is probably very trivial but I can't seem to find anyway to do it myself.

Thanks for any help!

possible duplicate of [how insert element before anchor using javascript](http://stackoverflow.com/questions/6415819/how-insert-element-before-anchor-using-javascript) — Gordon, Jan 26 '12 at 13:49
And a possible duplicate of http://stackoverflow.com/questions/814564/inserting-html-elements-with-javascript — Tim, Jan 26 '12 at 13:50
please point out why none of http://stackoverflow.com/search?q=insert+before+javascript helped answer your question — Gordon, Jan 26 '12 at 13:51

score 10 · Answer 1 · answered Feb 23 '18 at 17:50

With modern js you can utilize the prepend method. Currently caniuse.com says only of IE, Edge, and OperaMini are not supported.

ParentNode.prepend(nodesToPrepend);

e.g.,

ParentNode.prepend(newDiv);

Also, it automatically converts text into a text node so you could do the following for your use case:

document.getElementById("results").prepend(xmlhttp.responseText);

score 4 · Answer 2 · answered Jan 26 '12 at 13:53

You want either this

results.insertAdjacentHTML( 'beforebegin', xmlhttp.responseText );

or this

results.insertAdjacentHTML( 'afterbegin', xmlhttp.responseText );

(the variable results of course being a reference to the DOM element)

So, the first one will insert the new content before the element itself (as a previous sibling), and the second one will insert it inside the element before any other children).

score 3 · Accepted Answer · answered Jan 26 '12 at 13:52

3

I don't remember the exact syntax, but it something like:

var newDiv = document.createElement("div");
newDiv.innerHTML=xmlhttp.responseText;
document.getElementById("results").childNodes.addAt(0,newDiv);

if you can use jQuery, it's just simple as:

$("#results").prepend(xmlhttp.responseText);

answered Jan 26 '12 at 13:52

Alex Dn

5,333
7
38
77

"Property 'addAt' does not exist on type 'NodeListOf'." – CrazyVideoGamer Mar 31 '21 at 19:50
You probably shouldn't add an answer when you don't know the correct syntax – Ben Davis Aug 17 '21 at 23:03
childNodes is a read-only property, you can not add elements to it – royaltm Mar 25 '22 at 16:01

Add DOM elements to beginning of parent

3 Answers3