我们在页面中使用<script>元素就可以向页面中插入javascript代码。有两种方式：一种是通过src属性引用外部的JS文件，一种是用这个元素来包含一段js代码。所谓的动态脚本，就是指这个脚本在页面加载时不存在，在将来的某一个时刻通过修改DOM来动态的添加脚本。与操作html元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入JavaScript代码。
动态加载的外部JavaScript代码可以立刻被执行，例如下面的代码：
var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://www.jb51.net/demo.js"; document.body.appendChild(script);
从上图的结果中可以看到，上面代码在<body>元素中生成了一个<script>节点：
<script type="text/javascript" src="https://www.jb51.net/demo.js"></script>
需要注意的是，在执行最后一行代码把<script>添加到页面之前，是不会下载外部脚本文件的。
另一种指定JavaScript代码的方式是行内方式，例如：
var script = document.createElement("script"); script.type = "text/javascript"; script.appendChild(document.createTextNode("function fn1(){alert('hello wolrd!')} fn1();")); document.body.appendChild(script);
上面的代码会在<body>元素中插入一段JavaScript代码：
<script type="text/javascript"> function fn1(){alert('hello wolrd!')} fn1(); </script>
执行上面的代码后会弹出提示框，显示“hello world!”文本。
在Firefox、Safari、Chrome和Opera浏览器中，上面操作的DOM代码是可以正常执行的。但是在旧版本的IE浏览器中，这些代码会发生错误。旧版本的IE浏览器将<script>元素看做特殊元素，不允许DOM访问它的子节点。不过，可以使用<script>元素的text属性来指定JavaScript代码，例如：
var script = document.createElement("script"); script.type = "text/javascript"; script.text("function fn1(){alert('hello wolrd!')} fn1();"); document.body.appendChild(script);
像上面这样修改代码之后，在IE、Firefox、Safari3.0、Chrome和Opera浏览器中都可以运行。Safari3.0之前的浏览器虽然不能正确的执行text属性，但是可以使用文本节点来指定代码。所以如果需要支持旧版本的浏览器，可以像下面这样书写代码：
var script = document.createElement("script"); script.type = "text/javascript"; var code = "function fn1(){alert('hello wolrd!')} fn1();"; try{ script.appendChild(document.createTextNode(code)); }catch(e){ script.text = code; }
上面的代码首先尝试标准的DOM文本节点方法，因为除了旧版本的IE浏览器之外，其它浏览器都支持这种方式。如果这行代码抛出异常，那么说明是旧版本的IE浏览器，那就必须使用text属性。
我们可以将动态添加脚本的代码封装到一个函数中，通过不同的参数来动态加载不同的脚本。
function loadScript(code){ var script = document.createElement("script"); script.type = "text/javascript"; try{ script.appendChild(document.createTextNode(code)); }catch(e){ script.text = code; } document.body.appendChild(script); }
要调用这个函数，可以像下面的样子：
loadScript("function fn1(){alert('hello wolrd!')}");
这种方式加载的代码会在全局作用域中执行，而且当脚本执行后立刻可用。实际上，这样执行代码与在全局作用域中把相同的字符串传递给eval()函数是一样的。
动态样式
通常可以将CSS样式包含到HTML页面中的元素有两个：一个是<link>元素，用于包含来自外部的文件；另一个是<style>元素，用于指定嵌入样式。与动态脚本类似，动态样式是指在页面加载时并不存在的样式。动态样式是在页面加载完成后动态添加到页面中的脚本。例如下面的例子：
var link = document.createElement("link"); link.rel = "stylesheet" link.type = "text/css"; link.href = "styles.css"; var head = document.getElementsByTagName("head")[0];
以上的代码在所有主流的浏览器中都可以正常运行。需要注意的是<link>元素要添加到<head>元素中，而不是<body>元素中，才能保证在所有浏览器中的行为一致。
另外要注意的是，加载外部样式文件的过程是异步的，也就是说加载样式和执行JavaScript代码的过程没有固定的次序。
另外一种定义样式的方式是使用<style>元素来包含嵌入式的CSS样式。例如下面的代码：