Append a tag to spesific loaction of HTML using javascript

Question

I have these tags in my HTML,

<div id="main">
    <div id="options"></div>
    <div id="searchField"></div>
    <div id="options"></div>

    <div id="results">
        ***<!-- I want to add elements here -->***
        <div id="pagenumber">
        <div id="footer">
    </div>
</div>

What would be the javascript code that appends children above id="pagenumber" and inside id="results"?

Answer 1

You could use the following approach:

var pagenumber = document.getElementById('pagenumber'),
    results = document.getElementById('results'),
    newElem = document.createElement('div');

results.insertBefore(newElem, pagenumber);

To insert after the pagenumber node you could use:

results.insertBefore(newElem, pagenumber.nextSibling);

References:

• node.insertBefore().