使用javascript/jquery将'<script>'标签添加/附加到html [重复]答案

【问题标题】：Add/append '<script>' tag to html using javascript/jquery [duplicate]使用javascript/jquery将'<script>'标签添加/附加到html [重复]
【发布时间】：2013-03-07 14:20:54
【问题描述】：

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

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

Reasearch：我们有基本的结构工作，但卡在一个地方。我们需要为用户添加到页面的每个幻灯片附加一个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>';

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

【问题讨论】：

may have its own parameters for it,so we cannot have a common function. - 你不能创建一个接受这些参数的函数来区分滑块吗？
即使每个可以有单独的参数，你仍然可以有一个功能。只允许用户从参数列表中进行选择，然后在函数中考虑所有参数。如果用户没有选择参数，则将其排除
如果添加多个 ID 也会失败，因为页面上只能有一个 ID。 ID 是单数的！
我在大学最喜欢的原则是简化原则。它指出，如果您无法解决复杂问题，请将其简化为更小更简单的问题并尝试解决它们。尝试创建一个非常简单的 jsFiddle，它只具有您正在寻找的基本功能并将其发布在这里。
#Andy #Jeff #epascarello 是的，我正在处理具有通用函数和传递参数的相同行，但即使我尝试附加参数，脚本也会被执行。至于id 担心那些会是动态的，我在这里添加它作为一个单一的参考目的。谢谢大家的回复。

标签： javascript jquery html slideshow

【解决方案1】：

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

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

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

【讨论】：

是的，我试过了，但问题是我必须稍后将它发布（即保存）到用户创建的不同域，所以我想让它内联而不是外部！任何其他工作周围？谢谢你的回复
如何向该脚本添加数据属性？