title: Add/append '<script>' tag to html using javascript/jquery
body: <p><strong>Use Case:</strong> I am working on a template builder application.A user can build html templates using different components like text box,picture box,slideshow etc.</p>
  
  <p><strong>Issue:</strong> The issue we am facing is with the slideshow component.We are using a <a href="http://dev7studios.com/nivo-slider/">nivoslider</a> 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.<br/>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.</p>
  
  <p><strong>Reasearch:</strong> We have the basic structure working,but stuck at one place.We need to append a <code>script</code> tag to each slideshow added to the page by the user.</p>
  
  <pre><code>    return    '&lt;div id="slider" class="nivoSlider"&gt;'+
              '&lt;div class=""&gt;'+
                  '&lt;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="" /&gt;'+
              '&lt;/div&gt;'+
              '&lt;div class=""&gt;'+
                  '&lt;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="" /&gt;'+
              '&lt;/div&gt;'+
              '&lt;div class=""&gt;'+
                  '&lt;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="" /&gt;'+
              '&lt;/div&gt;'+
              '&lt;div class=""&gt;'+
                  '&lt;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="" /&gt;'+
              '&lt;/div&gt;'+
          '&lt;/div&gt;'+'&lt;script&gt;$("#slider").nivoSlider({effect: "sliceDown",animSpeed: 500,pauseTime: 3000,startSlide: 0,controlNavThumbs: true,controlNavThumbsFromRel:true, pauseOnHover: true,manualAdvance: false});&lt;/script&gt;';
  </code></pre>
  
  <p>The <strong>script tag</strong> 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 <code>&lt;div id="temp"&gt;&lt;/div&gt;</code> and appending the script tag in it,but I believe <code>jQuery</code> executes the script and does not save it so we get a blank div.How can we store the <strong>script tag in the HTML structure</strong> and save it to the database?</p>