如何用脚本替换 div？使用 innerhtml 不起作用答案

【问题标题】：How to to replace div with a script? Using innerhtml does not work如何用脚本替换 div？使用 innerhtml 不起作用
【发布时间】：2015-05-04 01:02:13
【问题描述】：

我正在尝试用使用 innerHTML 的脚本替换 div 的内容。

我的 HTML 的重要部分大致如下所示：

    <script> function replace() {
    document.getElementById("area").innerHTML = '<script type="text/javascript" src="SOMELINK"></script>';
    </script>

    <button onclick=replace()> replace </button>
    <div id = "area"> hello </div>

单击按钮时，我希望将 div #area 替换为脚本，以便显示链接的内容。我可以使用 innerHTML 将其替换为纯文本，例如将“hello”替换为“Hello World”，但是当我包含标签时，什么也没有出现。如果我删除标签，标签内的其余 url 就会显示出来。关于我可能做错了什么以及如何使用 javascript 将 div 替换为脚本对象的任何想法？

编辑：我打错了脚本标签，但现在它已修复！

【问题讨论】：

script 标签不会被显示，但是无论 javascript src 指向什么或者

标签： javascript

【解决方案1】：

您的脚本标签格式错误，通过innerHTML 插入脚本不会执行该脚本。如果您希望它加载源代码或执行其内部内容，您可以创建一个脚本元素并附加它。

var area = document.getElementById('area'),
    script = document.createElement('script'); // Create the script
// Set the script source
script.src = 'myAwesomeScript.js';
// Remove the contents of the DIV
area.innerHTML = '';
// But why would you nest a script inside of a DIV, anyway?
area.appendChild(script); // Append it

如果你真的想用脚本标签替换整个DIV：

var area = document.getElementById('area');

// * elem is the element to replace
// * src is the script's source
function replaceWithScript(elem, src) {
    var script = document.createElement('script');
    script.src = src;
    // Insert script after elem
    elem.parentNode.insertBefore(script, elem.nextSibling);
    // Remove elem. Now script has its position, and it looks
    // like it replaced it.
    elem.parentNode.removeChild(elem);
}

replaceWithScript(area, 'myAwesomeScript.js');

最后，如果您希望脚本显示为文本，那么只需：

document.getElementById('area').innerText = '<script src="farboo.js"></script>';

【讨论】：

感谢您的回答！但我收到一条错误消息：除非显式打开，否则无法从异步加载的外部脚本写入文档。 javascript是否必须在外部文件中并加载到我的主文件中？
看看这个：stackoverflow.com/questions/24297829/…，这是因为您在脚本中使用了document.write。您可以在脚本标签内添加脚本（作为内联脚本），但是如果您在文档完成加载时运行它，例如，您的整个页面就会消失。最好的解决方案是根本不使用document.write，而是使用DOM API 来创建/插入元素。
我使用了 appendChild(script)，正如您在答案中所写，并将其放入 index.html 文件（主 html 文件）中。当您引用的那篇文章说“动态加载的脚本”时，它必须是外部文件吗？我遇到的另一个问题是，最初，我传入一个 int 作为变量来确定要使用哪个 id（具体来说，我有三个 div，id 为“item1”、“item2”和“item3”。我想要打开一个谷歌趋势网站，查找 item1、item2 或 item3 并将谷歌趋势图表嵌入我的网站）这仍然可能吗？非常感谢！
嗯，是的，这是一个外部脚本。你正在加载一个外部脚本，对吧？嗯，如果我理解正确，我假设您将 int 传递给document.write？好吧，您可以循环n 次以使用document.createElement('div') 创建您的元素，并将n 连接到DIV 的ID。当您想附加它们时，只需为每个 div 执行：yourContainer.appendChild()（或将每个 div 附加到一个片段，然后附加该片段）。您应该设置您的脚本来执行此操作onload，以确保 DOM 已准备就绪。

【解决方案2】：

如果您提供格式良好的 HTML，它应该可以工作

document.getElementById("area").innerHTML = 
  '<script type="text/javascript" src="SOMELINK"></script>';

（你错过了结束标签）

【讨论】：