JavaScript 在执行点插入元素

JavaScript insert element at point of execution

本文关键字：插入 元素 执行 JavaScript      更新时间：2023-09-26

是否可以在执行<script>标记时插入DOM HTML元素？就像document.write()函数一样，它在执行时会立即将文本插入 DOM 中。

[更新]

是的，它是！这是我想到的：

var injectElement = function (element) {
    //Function that generates random id
    var randomID = function () {
        var id = '';
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        for( var i=0; i < 5; i++ )
           id += chars.charAt(Math.floor(Math.random() * chars.length));
       return id;
    };
    var id = randomID();
    //Adding placeholder element
    document.write('<div id="' + id + '"></div>');
    //Injecting new element instead of placeholder
    var placeholder = document.getElementById(id)
    placeholder.parentNode.replaceChild(element, placeholder);
};

是的，这是可能的：

<script>
    var arrScripts = document.getElementsByTagName('script');
    var currScript = arrScripts[arrScripts.length - 1];
    var newNode = document.createElement('div');
    newNode.innerHTML = 'This is a DIV';
    currScript.parentNode.appendChild(newNode);
</script>

此代码首先在文档中查找当前脚本块，然后在其后追加 DOM 元素。

好的

，所以我稍微考虑了一下，我想我已经创造了一种故障安全的方法，可以在<script>标签之后将元素注入 DOM 中，原因很简单：

<script>
    injectElement(document.createElement('canvas'));
</script>

首先，我使用 document.write 插入具有随机id属性的div。之后，我得到带有随机id的占位符，并将其替换为我要注入的新元素。

天才，如果我可以这么说，我的自我:D

代码如下：

var injectElement = function (element) {
    //Function that generates random id
    var randomID = function () {
        var id = '';
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        for( var i=0; i < 5; i++ )
           id += chars.charAt(Math.floor(Math.random() * chars.length));
       return id;
    };
    var id = randomID();
    //Adding placeholder element
    document.write('<div id="' + id + '"></div>');
    //Injecting new element instead of placeholder
    var placeholder = document.getElementById(id)
    placeholder.parentNode.replaceChild(element, placeholder);
};

如果你的目标是IE，请使用document.currentScript并回退到document.scripts[document.scripts.length-1] 

function writeHere(element)
{
 var sc = document.currentScript || document.scripts[document.scripts.length-1] ;  
 sc.parentNode.insertBefore(element, sc);
 // or in jquery $(sc).before($(element));
}

注意：我没有彻底测试document.scripts[document.scripts.length-1]但它在大多数情况下应该有效（= 如果您没有在其他脚本中手动创建脚本元素）。
这是IE的修复程序，所以谁在乎:)

相关文章：