Question

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

[UPDATE]

是的！这就是我想出的：

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);
};

Answer 1

是的，这是可能的：

<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元素。

Answer 2

好的，所以我给了一点思考，我想我已经创建了一种故障安全方法，可以在<script>标记之后将元素注入到DOM中，其中包含以下内容：

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

首先，我使用document.write插入带有随机 div属性的id。之后，我使用随机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);
};

Answer 3

使用document.currentScript ，如果要定位IE，则回退到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的修复程序，所以谁在乎：）

JavaScript插入元素在执行点

3 个答案: