%3cscript%3e中写html,createElement动态创建script标签

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

先来看看我遇到的问题：

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

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

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

不过有一种最常见的方法：

var element=document.createElement('script');

element.setAttribute('src', './js/move.js');

document.getElementsByTagName("head").appendChild(element);

这个按“逻辑”来说是肯定可以的，但是实际是不行的，网上也看到了好多类似的问题，都是在问为什么这种方法不行？？？

看到最后也没见问题解决，唉，只能自己研究了，于是我就用我喜欢的bug来测试了，先看测试的截图：

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

HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。

HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。

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

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() 方法。

HTMLCollection 对象是只读的，不能给它添加新元素，即使采用 JavaScript 数组语法也是如此。

HTMLCollection 对象和 NodeList 对象很相似，但前者可能既能用名称索引也能用数字索引。

其中提到了俩个方法：

item() 方法和 namedItem() 方法

item()返回集合中指定位置的元素(节点)。

namedItem()返回集合中 name 属性或 id 属性具有指定值的元素(节点)。

看到这你应该清楚了吧，嘿嘿，总算是不白忙活。

最后给出正确的写法以及输出结果：(注意标红的部分)

var element=document.createElement('script');

element.setAttribute('src', './js/move.js');

document.getElementsByTagName("head").item(0).appendChild(element);

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