首页 > 代码库 > 在script所在位置插入内容

在script所在位置插入内容

  上一篇文章document.write()的一些坑说了浏览器输出流关闭后使用document.write会清空当前页面,因此要避免在window.onload、$(document).ready()和ajax获取数据后使用document.write插入内容。但是这些常用操作又是很难避免的,那么在使用上述三种方法的时候能不能达到document.write()同样的效果呢?

  其实是可以的实现的,我们知道js中除了可以用docuemnt.write插入内容,还可以使用appendChild,利用appendChild向子节点末尾插入新节点的特性,我们可以获取包含当前script节点的父元素,然后添加到子节点末尾。由于页面正在加载中,此时添加的子节点会在当前script节点后面。那么这里的重点就是获取包含当前js的父元素,不过在js中貌似没有直接的办法获取父元素,这里可以使用一个比较巧妙的办法。执行当前js时,文档流正加载到当前script节点,那么它必然是文档中最后一个节点,通过获取文档中的script节点,然后取最后一个节点即时当前script节点。获取了script节点后,只有直接使用parentNode就能获取它的父元素,贴下这段代码:

var script = document.getElementsByTagName("script"),     len = script.length,     parent = script[len-1].parentNode;parent.appendChild(childNode);

在script所在位置插入内容