在包含脚本的地方注入HTML

Question

我想做的就是这个。 无论我的脚本包含在页面上的任何位置，请注入一些html。 所以无论在哪里：

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

被添加到页面，我可以输出

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

页面中的该位置。

Answer 1

不要想太多问题：

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