javascript - 在 html div 标签中显示执行的脚本结果

Question

我在一个简单的 html 文件中有一个按钮，onClick 调用下一个脚本:

function onShowTest() {
    $('div#content').html('<script>alert("Hello")</script>');
};

所以基本上，当我单击按钮时，我只会收到警报。

我真正想要实现的是，在 div 标签 (content) 中，我将看到一个脚本的结果，该脚本绘制了一些内容(而不仅仅是像示例中那样的警报，它没有任何内容)处理结果显示在 div 标签中)。

此外，该函数位于其他名为 utils.js 的文件中。

我尝试使用 jQuery.getScript() 但我无法让它工作。

Answer 1

要就地生成 HTML，您需要使用诸如 document.write 之类的东西，但这仅在解析时有效。 HTML 文档完成后，调用它将启动一个新文档并清除现有内容。

如果你想在某个地方生成 HTML，那么你需要使用 DOM 操作来完成，而不能根据脚本元素出现的位置来完成。

如果您想绘制一些东西，那么您需要使用 SVG、Canvas 或其他 API 来创建图像。 SVG 只是更多的 DOM 操作。 Canvas 首先需要 DOM 操作来创建一个 canvas 元素，然后在该元素上调用 canvas api 方法。

如果您希望代码从其他地方执行此操作，但从“此处”获取目标，那么您应该编写一个函数来执行操作并向其传递一个参数来告诉它在哪里执行操作。