Can you make a javascript function replace itself on the page with custom html?

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

You have to have MakeWidget defined somewhere, right? Presumably this is going to be in an external script. Why not just have the external script source just attach itself to the divContent using the window.onload method?

This would result in this code on your client's page:

<script src="http://foo.com/makewidget.js"&gt;&lt;/script&gt;

Your makewidget.js code could then look like this:

window.onload = function() { MakeWidget('divContent') }

There may some issues with other scripts loading and probably some cross-browser compatibility issues but that should get you pointed in the right direction.

Answer 2

So you want to have a script element which replaces itself with div.

Your initial code is like this:

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

You can rewrite it like this (I am using JQuery):

<script id="scriptContent">
    $('#scriptContent').after('<div id="divContent"></div>');
    MakeWidget('divContent');
    $('#scriptContent').remove();
</script>

I have not tried it though!

Answer 3

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>

Answer 4

I would think it would be possible to do it as follows:

<div id="divWidgets">
    <script type="text/javascript">
        MakeWidgets("divWidgets");
    </script>
</div>

The end result should be (if I understand your description correctly) that MakeWidgets will replace the contents of the DIV, which, in this case, is the script itself.