JavaScript插入元素在执行点 [英] JavaScript insert element at point of execution

问题描述

是否可以在执行< script> 标记的位置插入DOM HTML元素？像 document.write（）函数，它在执行时立即将文本插入到DOM中。

[UPDATE]

是的！这是我想出的：

  var injectElement = function（element）{
 //生成随机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（）; 
 
 //添加占位元素
 document.write（'< div id ='+ id +'>< / div>'）; 
 
 //注入新元素而不是占位符
 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 ='这是DIV'; 
 
 currScript.parentNode.appendChild（newNode）; 
 
< / script> 
  

此代码首先定位文档中的当前脚本块，然后在其后添加DOM元素。 >

Is it possible to insert DOM HTML element at the point of execution of <script> tag? Like with document.write() function which immediately inserts text into DOM when executed.

[UPDATE]

Yes it is! Here's what I came up with:

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

解决方案

Yes this is possible:

<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>

This code first locates current script block within the document and then appends DOM element after it.

这篇关于JavaScript插入元素在执行点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！