Can you make a javascript function by replacing it with custom html on the page?

Question

I have javascript that will create some kind of widget on the page. I will give this fragment to clients, so I want them to do very little.

The most obvious solution I'm working with now is something like this:

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

The make widget basically searches for the divContent div and populate it with my html widgets.

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

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

Change I want to generate HTML exactly where the MakeWidget function is called on the page.

Answer 1

Script Div, Javascript Script?

. <script>, defer async script, Script . , , , 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 2

MakeWidget - , ? , script. script divContent window.onload?

:

<script src="http://foo.com/makewidget.js"></script>

makewidget.js :

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

, , , .

Answer 3

, script, div.

:

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

( JQuery):

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

!

Answer 4

, :

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

( ), MakeWidgets DIV, script.