Add/append '<script>' tag to html using javascript/jquery [duplicate]

Question

Use Case: I am working on a template builder application.A user can build html templates using different components like text box,picture box,slideshow etc.

Issue: The issue we am facing is with the slideshow component.We are using a nivoslider plugin for building it.The slider must have settings like the user can change transition time,select transition etc.The user can add more than slide-shows.
Now the issue is when we add multiple slideshows,each one may have its own parameters for it,so we cannot have a common function.Also,the user can come back to edit the template,so we need to have independent script for each slideshow.

Reasearch: We have the basic structure working,but stuck at one place.We need to append a script tag to each slideshow added to the page by the user.

    return    '<div id="slider" class="nivoSlider">'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide01.jpg" data-thumb="images/slideShow/thumb/slide01.jpg" alt="" />'+
            '</div>'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide02.jpg" data-thumb="images/slideShow/thumb/slide02.jpg" alt="" />'+
            '</div>'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide03.jpg" data-thumb="images/slideShow/thumb/slide03.jpg" alt="" />'+
            '</div>'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide04.jpg" data-thumb="images/slideShow/thumb/slide04.jpg" alt="" />'+
            '</div>'+
        '</div>'+'<script>$("#slider").nivoSlider({effect: "sliceDown",animSpeed: 500,pauseTime: 3000,startSlide: 0,controlNavThumbs: true,controlNavThumbsFromRel:true, pauseOnHover: true,manualAdvance: false});</script>';

The script tag at the end of the code is what we are trying to append to the HTML and save it to the database.We tried having a blank <div id="temp"></div> and appending the script tag in it,but I believe jQuery executes the script and does not save it so we get a blank div.How can we store the script tag in the HTML structure and save it to the database?

Answer 1

Instead of writing out the script tag directly, create it as an object and then append it. The browser should respect it when you've created the element directly instead of passing it a string.

var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "scriptname.js";
$("#temp").append(script);

Then you can just put the javascript you want to execute in the external script file and it should work fine