从外部 js 脚本创建元素并插入到 html 中
Create element from external js-script and insert into html
我正在尝试创建一个小部件。类似于google-adsense块,所以我需要从页面的不同位置调用相同的脚本。是否可以在外部 js-script 中创建一个元素并将其插入到我调用脚本的位置?
我这样做:
<div><script type="text/javascript" src="loader.js"></div>
<div><script type="text/javascript" src="loader.js"></div>
装载机.js:
var div = document.createElement('div');
div.setAttribute('class', 'inner-div');
document.body.appendChild(div);
我有:
<div><script type="text/javascript" src="loader.js"></div>
<div><script type="text/javascript" src="loader.js"></div>
<div class="inner-div"></div>
<div class="inner-div"></div>
但我想得到这个结果:
<div>
<script type="text/javascript" src="loader.js">
<div class="inner-div"></div>
</div>
<div>
<script type="text/javascript" src="loader.js">
<div class="inner-div"></div>
</div>
我想
我已经找到了解决方案。查找当前脚本标记:
<div>
<script type="text/javascript">
var scripts = document.getElementsByTagName('script');
var script = scripts[scripts.length - 1];
loadScript('loader.js', function () {
loader().init({script: script});
});
</script>
</div>
加载脚本函数:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
然后在加载器中.js:
init: function(args) {
...
var div = document.createElement('div');
div.setAttribute('class', 'inner-div');
args.script.parentNode.appendChild(div);
...
}
相关文章:
- 使用PHP插入HTML在JavaScript上不起作用
- 如何使用innerHtml正确插入html
- AngularJS指令,在元素后插入HTML
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 通过jQuery插入HTML不起作用
- 通过javascript以编程方式将文件插入HTML输入
- 在DIV中动态插入HTML并访问新元素
- 在所有元素中插入HTML
- 在其他图像下使用javascript将图像插入html
- 在工具提示Javascript中插入HTML
- 在HTML字符串的某个段落后插入HTML
- 可以插入在插入HTML标记之前
- 从 AngularJS 将文本插入 HTML
- 将 javascript 返回值插入 html
- 流路由器 - 将内容插入 HTML 模板
- 插入html时是否有触发事件的方法
- JavaScript-插入HTML的内容部分
- jquery多次在元素之间插入html
- 将当前年份插入HTML
- 在光标位置插入HTML,并使用javascript将光标移动到插入的HTML的末尾