A-A+

createElement动态创建script标签

2017年06月29日 14:37 汪洋大海 评论 1 条 阅读 11 views 次

今日做项目要做自适应,需要动态的调用js和css于是研究了一下createElement方法,看了网上的许多案例都是错误的,希望在此能更正一下createElement的使用规范:

先来看看我遇到的问题:

createElement问题点

我想在head标签内动态添加js和link(css),用了网上的方法都不行,于是找了html dom属性一番研究,终于看到了希望:

1
document.write(unescape("%3Cscript src='./js/move.js' type='text/javascript'%3E%3C/script%3E"));

这种方法只能添加到body里面如果写到head里的话就会屏幕输出(因为head相对于body来说是只读的)
不过有一种最常见的方法:

1
2
3
var element=document.createElement('script');
element.setAttribute('src', './js/move.js');
document.getElementsByTagName("head").appendChild(element);

这个按“逻辑”来说是肯定可以的,但是实际是不行的,网上也看到了好多类似的问题,都是在问为什么这种方法不行???
看到最后也没见问题解决,唉,只能自己研究了,于是我就用我喜欢的bug来测试了,先看测试的截图:

test 测试img


看到结果后似乎问题有眉目了,原来是这个结果的问题,他输出了一个html对象集合,哈哈哈,原来问题在这了,js要插入子标签的话跟定是要指定一个元素,但是应该怎么指定元素呢?百度了html dom基础属性看看,找到了这个:

1
2
HTMLCollection 是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。
HTML DOM 中的 HTMLCollection 是“活”的;如果基本的文档改变时,那些改变通过所有 HTMLCollection 对象会立即显示出来。

下面的每个项目(以及它们指定的属性)都返回 HTMLCollection:

1
2
3
4
5
6
7
8
Document (images, applets, links, forms, anchors)
form (elements)
map (areas)
select (options)
table (rows, tBodies)
tableSection (rows)
row (cells)
HTMLDocument 接口的许多属性都是 HTMLCollection 对象,它提供了访问诸如表单、图像和链接等文档元素的便捷方式。form.elements 和 select.options 都是 HTMLCollection 对象。HTMLCollection 还提供了遍历 Table 的各行以及 TableRow 的各个单元格的一种方便方法。

在上面已经提到了,HTMLCollection 对象是带有方法的 HTML 元素的集合,用它可以通过元素在文档中的位置或它们的 id 属性、name 属性获取元素。在 JavaScript 中,HTMLCollection 对象的行为和只读数组一样,可以使用 JavaScript 的方括号,通过编号或名称索引一个 HTMLCollection 对象,而不必调用 item() 方法和 namedItem() 方法。

1
2
HTMLCollection 对象是只读的,不能给它添加新元素,即使采用 JavaScript 数组语法也是如此。
HTMLCollection 对象和 NodeList 对象很相似,但前者可能既能用名称索引也能用数字索引。

其中提到了俩个方法:

1
2
3
item() 方法和 namedItem() 方法
item()	返回集合中指定位置的元素(节点)。
namedItem()	返回集合中 name 属性或 id 属性具有指定值的元素(节点)。

看到这你应该清楚了吧,嘿嘿,总算是不白忙活。
最后给出正确的写法以及输出结果:(注意标红的部分)

1
2
3
var element=document.createElement('script');
element.setAttribute('src', './js/move.js');
document.getElementsByTagName("head").item(0).appendChild(element);

试验成功

看看截图,这下才真正的找到了元素的位置。

文章来源:http://www.yefengbar.com/news/jqs/166.html 作者:叶枫酒吧工作室

标签:

1 条留言  访客:1 条  博主:0 条

  1. 666

    多谢虾米表哥,正好最近需要这个问题

给我留言