使用javascript / jquery [duplicate]将“<script>”标签添加/附加到html

Question

这个问题在这里已有答案：

• 无法附加<script>元素 18个答案

用例：我正在使用模板构建器应用程序。用户可以使用不同的组件构建html模板，如文本框，图片框，幻灯片等。

问题：我们面临的问题是幻灯片组件。我们正在使用nivoslider插件来构建它。滑块必须具有用户可以更改转换时间，选择转换等设置。用户可以添加多个幻灯片放映。
现在的问题是当我们添加多个幻灯片时，每个幻灯片可能都有自己的参数，所以我们不能有一个共同的功能。而且，用户可以回来编辑模板，所以我们需要为每个幻灯片显示独立的脚本。

研究：我们的基本结构有效，但卡在一个地方。我们需要在用户添加到页面的每个幻灯片中附加一个script标签。

    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>';

代码末尾的脚本标记是我们尝试附加到HTML并将其保存到数据库的内容。我们尝试使用空白<div id="temp"></div>并在其中附加脚本标记，但我相信jQuery执行脚本并且不保存它所以我们得到一个空白div。我们如何将脚本标记存储在HTML结构中并将其保存到数据库中？

Answer 1

而不是直接写出脚本标记，将其创建为对象，然后附加它。 当您直接创建元素而不是传递字符串时，浏览器应该尊重它。

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

然后你可以把你想要执行的javascript放在外部脚本文件中，它应该可以正常工作