注入HTML包含腳本的地方

Question

我想要做的是這個。無論我的腳本包含在頁面中，注入一些html。所以，在：

<script src="http://demo.com/stats/stats.js"></script> 

被添加到頁面，我可以輸出

<div id="stats"></div> 

在頁面中的那個位置。

Answer 1

不要overthink問題：

document.write('<div id="stats"></div>'); 

如果腳本異步加載然而，這將失敗。

對於採用異步加載腳本有效的解決方案：

(function() { 
    function addHtml() { 
    var scripts = document.getElementsByTagName('script'); 
    for (var i = 0; i < scripts.length; i++) { 
     if (scripts[i].src !== 'http://demo.com/stats/stats.js') { 
     continue; 
     } 
     var div = document.createElement('div'); 
     div.id = 'stats'; 
     if (scripts[i].nextElementSibling) { 
     scripts[i].parentNode.insertBefore(div, scripts[i].nextElementSibling); 
     } else { 
     scripts[i].parentNode.appendChild(div); 
     } 
    } 
    } 
    if (document.readyState === "complete") { 
    addHtml(); 
    } else { 
    document.addEventListener('DOMContentLoaded', addHtml, false); 
    } 
})()