在没有 JQUERY 的情况下将脚本附加到 DOM [重复]答案

【问题标题】：Appending Script to DOM without JQUERY [duplicate]在没有 JQUERY 的情况下将脚本附加到 DOM [重复]
【发布时间】：2014-01-27 02:26:06
【问题描述】：

修复它的唯一方法是使用 google chrome/IE10+ 只是无法使其在 IE8 上运行。

我正在尝试将一些脚本附加到我的网页，但我不想使用任何 Jquery。

这确实有效，但它在第 3 行使用 jquery。

var element = document.getElementById("contentSCRIPT");
    element.parentNode.removeChild(element);            // this removes the div and all the javascript inside it
    $('<div id="contentSCRIPT"></div>').appendTo(document.getElementById("main")); // this adds again the content to the page
    $('<script>' + document.getElementById("textSCRIPT").value + ' ;</' + 'script>').appendTo(document.getElementById("contentSCRIPT"));       // in here i try to add the javascript code back to the content.

我试过了：

var content = document.createTextNode('<div id="contentSCRIPT"></div>');
    document.getElementById("main").appendChild(content);

但它会将我的脚本（内容）添加为 HTML 而不是代码。

有什么解决办法吗？谢谢！

编辑：

我必须创建 contentScript 因为我想从页面中删除脚本并多次添加。

我试过了

var contentScript = document.createElement("script");
    contentScript.setAttribute("id", "contentSCRIPT");
    document.getElementById('contentSCRIPT').innerHTML = document.getElementById('textoSCRIPT').value;
    document.getElementById("main").appendChild(contentScript);

但同样，这会将代码添加为 HTML（在页面上显示为标签），而不是添加到 DOM。

【问题讨论】：

您要向页面添加什么脚本？页面上是否已经存在文本，或者您是否正在尝试加载/导入外部文件的脚本？
@Dom：我能问一下你认为他目前正在尝试使用什么吗？
我正在使用 Javascript... 我已经在页面上有一些文本。 textSCRIPT 元素是文本区域输入。
@user3174789 编辑后，您的XY problem 似乎在这里？

标签： javascript jquery html append

【解决方案1】：

var script = document.createElement("script");
var contentScript = document.createElement("div");

contentScript.setAttribute("id", "contentSCRIPT");
script.innerHTML = document.getElementById('textSCRIPT').value;
contentScript.appendChild(script);

【讨论】：

【解决方案2】：

$('<div id="contentSCRIPT"></div>')可以用javascript写成如下：

var contentScript = document.createElement("div");
contentScript.setAttribute("id", "contentSCRIPT");

要执行 jQuery 的 appendTo，您希望改为在父级上使用 appendChild：

document.getElementById("main").appendChild(contentScript);

同样，对于第四行：

var script = document.createElement("script");
script.innerHTML = document.getElementById('textSCRIPT').value;
contentScript.appendChild(script);

编辑

根据您编辑的信息，您不需要创建 div 来保存 contentScript。只需在脚本上添加一个 id：

var contentScript = document.createElement("script");
contentScript.setAttribute("id", "contentSCRIPT");
contentScript.innerHTML = document.getElementById('textSCRIPT').value;
document.getElementById("main").appendChild(contentScript);

【讨论】：

已经尝试过了，和我做的一样，它在页面上添加为 HTML 而不是脚本
@user3174789 对不起，我错过了第四行，但已经编辑了它。它添加为 HTML 的原因是因为我将它直接添加到 div，而不是将它添加到添加到的脚本标记中分区。这个版本应该会更好
@user3174789 我在编辑之前的代码应该可以很好地为您服务，但您可能还想查看我的编辑，看看是否适合您。
它在 contentScript.innerHTML = document.getElementById('textSCRIPT').value; 行给出错误尝试将行更改为 contentScript.innerHTML = "alert('test');";但仍然报错
找不到元素。我认为创建后添加 ID 不起作用？

【解决方案3】：

您可以创建一个脚本元素并将其附加到文档中：

var script = document.body.appendChild(document.createElement('script'));
script.text = '/* CODE */';

作为对您编辑的回应：您可以从 DOM 中删除脚本元素，但不能remove the script itself。

A live demo at jsFiddle.

【讨论】：

对脚本有足够的了解，应该可以delete 脚本创建的对象，特别是如果它擅长不污染全局命名空间。但当然，这是移除元素之外的另一个步骤。
@ScottMermelstein 是的，有可能，但最终结果取决于代码。还有一些对象，比如定时器的函数，如果一个定时器在试图删除它时正在运行，则不能被删除。

【解决方案4】：

您可以通过简单地添加script 标签以编程方式添加脚本标签：

var scriptTag = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));

scriptTag.innerHTML = document.getElementById("textSCRIPT").value;

如果要将脚本添加到正文，请将“head”更改为“body”。

【讨论】：