Question

I have some javascript which will create some sort of widget on a page. I will be giving this snippet to clients so I want them to have to do very little.

The most obvious solution which I have work right now looks something like this:

<div id="divContent"></div>
<script type="text/javascript">
    MakeWidget('divContent');
</script>

Make widget basically looks for the divContent div and fill it with my widget’s html.

Is there a better way to do this?
Can you replace a Script Tag with a Div using Javascript in that Script Tag?

I would really like it if I could reduce the code down to only the MakeWidget function and it would replace itself and the script tag with the html the function generates.

Edit – I essentially want to generate HTML exactly where the MakeWidget function is called on the page.

Answer 1

Can you replace a Script Tag with a Div using Javascript in that Script Tag?

Yes. When the <script> element is reached, assuming it is not a defer or async script, it will be the last script element in the page so far. So you can say, either inline or in an external script:

<script type="text/javascript">
    (function() {
        var scripts= document.getElementsByTagName('script');
        var script= scripts[scripts.length-1];
        var div= document.createElement('div');
        div.innerHTML= 'Whatever content is going to be inserted';
        script.parentNode.insertBefore(div, script);
    })();
</script>