0

I'm trying to write some JavaScript that once the page has finished loading will create a div in the place where the is placed.

Here is a stripped-back version of the code...

window.addEventListener('load', function () {
    var content = document.createElement('div');
    content.id = 'div-ID'; 
    document.getElementsByTagName('body')[0].appendChild(content);      
});

It works outside of the addEventListener(), however, when inside the event listener it always puts the created div below the rest of the page content not in the place the <script> tag is placed.

I'm certain the issue is to do with this line...

document.getElementsByTagName('body')[0].appendChild(content);

I need an alternative version to this which doesn't appendChild() but my JS isn't that good and everything I've tried hasn't worked.

Its most likely simple to achieve, I've tried searching Google and Stack Overflow but my search terms don't seem to be producing the desired results.

Any help on this would be much appreciated

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Stuart Moir
  • 19
  • 1
  • 4
  • Possible duplicate of [Inserting HTML elements with JavaScript](https://stackoverflow.com/questions/814564/inserting-html-elements-with-javascript) – Heretic Monkey Nov 07 '19 at 21:01
  • Hi, thank you for your comment I will take a look and give it a go, as I said I did search google and SO but didn't come across anything that seemed to match what i was looking for, maybe my search terms weren't correct. – Stuart Moir Nov 07 '19 at 21:37
  • You might need to apply some thought to the answers to fit them to your circumstances -- there is unlikely to be a copy-paste-ready solution. For instance, the answer you've received to this question requires to you figure out where you want in insert the content, if not at the end, or at the beginning, then where? The answer will guide what to put as the `referenceNode` parameter. – Heretic Monkey Nov 07 '19 at 21:42
  • Thanks for your response, Im not expecting a copy and paste solution. In answer to the question 'figure out where you want to insert the content' i just want to insert the content where the script tag is placed i don't want to append to an existing DOM element. This is the problem i cant find anything that helps with this. I did try doing in as you suggested in your link but again it didn't work – Stuart Moir Nov 08 '19 at 16:05

1 Answers1

0

You could do it with Node.insertBefore

As such, your code would be something like:

document.body.insertBefore( content, document.body.childNodes[0] );

The second parameter is the referenceNode, that has following comment:

referenceNode is not an optional parameter -- you must explicitly pass a Node or null. Failing to provide it or passing invalid values may behave differently in different browser versions.

Icepickle
  • 12,689
  • 3
  • 34
  • 48
  • Hi, thank you for your advice. I tried this, however, the content is now above the page content i.e above the header rather than between header and footer. – Stuart Moir Nov 07 '19 at 21:36
  • @StuartMoir if you would edit in the structure you have and where you want to put the node, maybe it's easier to help. For now, read the documentation in the link I have given you, and check what the referenceNode (the second parameter) actually does. It's very likely you will still need it inside the load event :) – Icepickle Nov 07 '19 at 22:26
  • Thanks, for the response. I can't figure it out from that documentation i just want to insert the content where the script tag is placed i don't want to append to an existing DOM element. – Stuart Moir Nov 08 '19 at 16:06