JavaScript insert element at point of execution

Question

Is it possible to insert DOM HTML element at the point of execution of <script> tag? Like with document.write() function which immediately inserts text into DOM when executed.

[UPDATE]

Yes it is! Here's what I came up with:

var injectElement = function (element) {
    //Function that generates random id
    var randomID = function () {
        var id = '';
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        for( var i=0; i < 5; i++ )
           id += chars.charAt(Math.floor(Math.random() * chars.length));
       return id;
    };

    var id = randomID();

    //Adding placeholder element
    document.write('<div id="' + id + '"></div>');

    //Injecting new element instead of placeholder
    var placeholder = document.getElementById(id)
    placeholder.parentNode.replaceChild(element, placeholder);
};

Why what are you trying to achieve? Why not simple place a placeholder there (e.g. an empty DIV) and append elements there? — Comfortably Numb
– Comfortably Numb, Commented Sep 20, 2013 at 21:45
So you want to do the same as document.write does, but without document.write? — bfavaretto
– bfavaretto, Commented Sep 20, 2013 at 21:46
@bfavaretto if I pass object to document.write it'll convert it to a string. I want to insert html element at the place of <script> — Jinx
– Jinx, Commented Sep 20, 2013 at 21:52
@YuriyGalanter i want to insert canvas element without having to reference id. You just place script in body of a document like this <script>game.createCanvas();</script> — Jinx
– Jinx, Commented Sep 20, 2013 at 21:54
That really isn't how that's done. You need to put a place-holder element in the body, something you can find by ID, and then append a <canvas> element to it with some script either running in the <head> or in an external .js file. — user229044
– user229044 ♦, Commented Sep 20, 2013 at 22:00

Comfortably Numb · Accepted Answer · 2013-09-20 22:01:44Z

1

Yes this is possible:

<script>
    var arrScripts = document.getElementsByTagName('script');
    var currScript = arrScripts[arrScripts.length - 1];

    var newNode = document.createElement('div');
    newNode.innerHTML = 'This is a DIV';

    currScript.parentNode.appendChild(newNode);

</script>

This code first locates current script block within the document and then appends DOM element after it.

answered Sep 20, 2013 at 22:01

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bfavaretto Over a year ago

This is not failproof

bfavaretto Over a year ago

A safer option is using <script id="something">, then getting the script element by id.

Comfortably Numb Over a year ago

@bfavaretto completely agree and this is what I was doing initially. But then OP stated he wanted to do this "without having to reference id."

Jinx Over a year ago

@bfavaretto yes, this was supposed to be my fallback. But this was interesting to know.

Comfortably Numb Over a year ago

There're other way to identify current script block (like placing a unique string within the block). Whatever works best.

Jinx · Accepted Answer · 2013-09-21 07:00:53Z

Ok, so I gave this one a little bit of thought and I think I have created a fail safe way to inject element into DOM after the <script> tag with something as simple as:

<script>
    injectElement(document.createElement('canvas'));
</script>

First I use document.write to insert div with random id attribute. After that, I get that placeholder with random id and replace it with my new element that I want to inject.

Genius if I may say so my self :D

Here's the code:

var injectElement = function (element) {
    //Function that generates random id
    var randomID = function () {
        var id = '';
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        for( var i=0; i < 5; i++ )
           id += chars.charAt(Math.floor(Math.random() * chars.length));
       return id;
    };

    var id = randomID();

    //Adding placeholder element
    document.write('<div id="' + id + '"></div>');

    //Injecting new element instead of placeholder
    var placeholder = document.getElementById(id)
    placeholder.parentNode.replaceChild(element, placeholder);
};

frenchone · Accepted Answer · 2018-10-17 11:19:35Z

0

Use document.currentScript and fallback to document.scripts[document.scripts.length-1] if you're targetting IE

function writeHere(element)
{
 var sc = document.currentScript || document.scripts[document.scripts.length-1] ;  
 sc.parentNode.insertBefore(element, sc);
 // or in jquery $(sc).before($(element));
}

note: I didn't test document.scripts[document.scripts.length-1] thoroughly but it should work in most cases (= if you don't create script element by hand in other scripts).
And this is a fix for IE so who cares :)

answered Oct 17, 2018 at 11:19

frenchone

1,6174 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

JavaScript insert element at point of execution

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related