Question

我有这些行来调用我的JS文件和库：

<script src="assets/libs/perfect-scrollbar/perfect-scrollbar.jquery.js"></script>
<script src="assets/libs/PACE/pace.min.js"></script>
<script src="assets/js/library.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/app.js"></script>

动态地，我需要插入一个新库。所以我会做：

document.body.appendChild(script);

脚本是我的新库。

但是如何在library.js之前插入它？

感谢您的帮助。

Answer 1

<script src="assets/libs/perfect-scrollbar/perfect-scrollbar.jquery.js"></script>
<script src="assets/libs/PACE/pace.min.js"></script>

<script>
document.body.appendChild(script);
document.body.appendChild(<library.js file>);
document.body.appendChild(<plugins.js file>);
document.body.appendChild(<app.js file>);
</script>

也动态添加以下脚本！

如果您不想这样做，那么您必须在脚本中使用$('html').html()获取DOM元素，并使用@Liam建议的here提及的技术。

BUT！如果要在加载新库后加载上述脚本，则必须有一个原因（这些脚本依赖于该库），在这种情况下，您也应该动态添加这些脚本。

Answer 2

它正在工作，我做了实验，结果是积极的。试试这段代码

   var mynewScript = document.createElement("script");
    mynewScript.type = "text/javascript";
    mynewScript.src = "http://mywebsite.com";

    var a = document.getElementsByTagName('script')[2];   // [2] is the index of library.js

    var parentT = a.parentNode;

    parentT.insertBefore(mynewScript , a);

Answer 3

我确实喜欢这个并且它的工作正常

const ID = 'test-snippet';
        // abort if it already exists
        if ( document.getElementById( ID ) ) {
            return;
        }
        const scriptTags = document.getElementsByTagName( 'script' );
        const lastScriptTag = scriptTags[scriptTags.length - 1];
        // create new script element
        const js = document.createElement( 'script' );
        js.id = ID;
        js.src = 'https://some.js/';;
        js.type = 'text/javascript';
        js.async = true;
        // append it after the last script tag
        lastScriptTag.parentNode.insertBefore( js, lastScriptTag );

在另一个特定脚本标记之前插入脚本标记

3 个答案: