3

How do I insert element at script location (not to rely on div's id or class), for example

<div class="div">
    <script src='//remotehost/js/addDivSayHello.js'></script>
</div>

where addDivSayHello.js will insert div child <div>hello</div>, result example:

<div class="div">
    <div>hello</div>
    <script src='//remotehost/js/addDivSayHello.js'></script>
</div>

I tried searching inside Stackoverflow but found nothing.

Daniel Hyuuga
  • 446
  • 1
  • 5
  • 13

5 Answers5

6

You can use insertBefore method. Something like this:

var div = document.createElement('div'), // Create a new div
    script = document.scripts[document.scripts.length - 1]; // A reference to the currently running script

div.innerHTML = 'Hello'; // Add some content to the newly-created div
script.parentElement.insertBefore(div, script); // Add the newly-created div to the page

A live demo at jsFiddle. Notice, that you can use external scripts as well.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • Yes this answers my question. Thank you! So `script = document.scripts[document.scripts.length - 1]` is needed in order to determine the parent element of the script – Daniel Hyuuga Dec 11 '14 at 08:41
  • @DanielHyuuga Actually `document.scripts` is a collection of all scripts within the document. This collection is updated every time a new script is loaded/parsed during the page parsing. This way the last member of the collection always refers to the currently running script, _if it is not loaded asynchronously_. `script.parentElement` refers to the element containing the `script` tag itself. – Teemu Dec 11 '14 at 09:06
  • I see, what if the script is loaded by async method? – Daniel Hyuuga Dec 11 '14 at 11:33
  • When running an asynchronoulsy loaded script, the last member of `document.script` might refer to a different script. As long as the script itself is loaded synchronously, you can rely it finds "himself" as a last member of `document.scripts`. This means really running the script immediately after load, in event handlers you can't rely on this. You could put the lines above into an IIFE, that'll make sure the lines are executed, and also keeps some unnecessary variables out of the global namespace. – Teemu Dec 11 '14 at 12:10
  • would be adding an ID to the script tag help? – Daniel Hyuuga Dec 11 '14 at 12:17
  • Yes, it would make sure you are always referring a correct script. – Teemu Dec 11 '14 at 12:32
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66660/discussion-between-daniel-hyuuga-and-teemu). – Daniel Hyuuga Dec 11 '14 at 13:13
1

You could use insertAdjacentHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML

var node = document.querySelector('script[src="js/addDivSayHello.js"]');
node.insertAdjacentHTML('beforebegin', '<div>hello</div>');
Sam Samskies
  • 141
  • 2
  • 8
0
$("div.div").prepend('<div>hello</div>');
Stepan Tripal
  • 651
  • 6
  • 7
0

You have to call the script at some point i like to use jquery to add an element http://api.jquery.com/append/ you have to say where do you want to add :

$(".div")

and what should happen there:

.append("<div>Hello</div>")

so its look like that:

$(".div").append("<div>Hello</div>")
AO_
  • 2,573
  • 3
  • 30
  • 31
Stefan
  • 438
  • 4
  • 9
0

Another solution that doesn't wrap everything inside a div and that can be re-used several times without implications:

function insertHtmlToDocumentAtCurrentScriptPosition(htmlStr)
{
    var scriptTag = document.getElementsByTagName('script');
    scriptTag = scriptTag[scriptTag.length - 1];
    var parentTag = scriptTag.parentNode;
    parentTag.innerHTML += htmlStr;
}

The function takes html as string, so call it like:

insertHtmlToDocumentAtCurrentScriptPosition(`<p>Hello</p>`);
Willy Wonka
  • 31
  • 5