1

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

3 回答 3

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

于 2013-09-20T22:01:44.207 回答
0

好的，所以我对此进行了一些思考，并且我认为我已经创建了一种故障安全方法，可以在标记之后将元素注入 DOM，其<script>简单如下：

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

首先，我使用随机属性插入document.write。之后，我用随机的占位符替换它，并用我想要注入的新元素替换它。div idid

天才，如果我可以这样说我的自己：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);
};
于 2013-09-21T07:00:53.113 回答
0

如果您的目标是 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 的修复，所以谁在乎 :)

于 2018-10-17T11:19:35.253 回答