javascript - 您可以使 javascript 函数在页面上用自定义 html 替换自身吗？

Question

我有一些 javascript 可以在页面上创建某种小部件。我会将此片段提供给客户，因此我希望他们只需做很少的事情。

我目前使用的最明显的解决方案如下所示:

<div id="divContent"></div>
<script type="text/javascript">
    MakeWidget('divContent');
</script>

Make widget 基本上是查找 divContent div 并用我的 widget 的 html 填充它。

有更好的方法吗？您可以使用脚本标签中的 Javascript 将脚本标签替换为 Div 吗？

如果我可以将代码减少到只有 MakeWidget 函数，并且它会用函数生成的 html 替换自身和脚本标记，我真的很喜欢。

编辑 - 我基本上想在页面上调用 MakeWidget 函数的位置生成 HTML。

Answer 1

Can you replace a Script Tag with a Div using Javascript in that Script Tag?

是的。当 <script>到达元素，假设它不是 defer或 async脚本，它将是目前页面中的最后一个脚本元素。所以你可以说，无论是内联还是在外部脚本中:

<script type="text/javascript">
    (function() {
        var scripts= document.getElementsByTagName('script');
        var script= scripts[scripts.length-1];
        var div= document.createElement('div');
        div.innerHTML= 'Whatever content is going to be inserted';
        script.parentNode.insertBefore(div, script);
    })();
</script>