使用 javascript/jquery 将 '<script>' 标签添加/附加到 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15273590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add/append '<script>' tag to html using javascript/jquery
提问by KillABug
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.
用例：我正在开发一个模板构建器应用程序。用户可以使用不同的组件（如文本框、图片框、幻灯片等）构建 html 模板。
Issue:The issue we am facing is with the slideshow component.We are using a nivosliderplugin 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.
问题：我们面临的问题是幻灯片组件。我们正在使用nivoslider插件来构建它。滑块必须具有用户可以更改过渡时间、选择过渡等设置。用户可以添加多个幻灯片。
现在的问题是当我们添加多个幻灯片时，每个幻灯片可能都有自己的参数，所以我们不能有一个通用的功能。另外，用户可以回来编辑模板，所以我们需要为每个幻灯片都有独立的脚本.
Reasearch:We have the basic structure working,but stuck at one place.We need to append a scripttag to each slideshow added to the page by the user.
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>';
The script tagat 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 jQueryexecutes the script and does not save it so we get a blank div.How can we store the script tag in the HTML structureand save it to the database?
代码末尾的脚本标记是我们试图附加到 HTML 并将其保存到数据库中的内容。我们尝试在其中添加一个空白<div id="temp"></div>并附加脚本标记，但我相信jQuery执行脚本并没有保存它所以我们得到一个空白的 div。我们如何将脚本标签存储在 HTML 结构中并将其保存到数据库中？
采纳答案by Ben McCormick
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
然后你可以把你想要执行的 javascript 放在外部脚本文件中，它应该可以正常工作
