动态脚本
我们在页面中使用
动态加载的外部javascript代码可以立刻被执行，例如下面的代码：
var script = document.createelement(script);script.type = text/javascript;script.src = demo.js;document.body.appendchild(script);
从上图的结果中可以看到，上面代码在元素中生成了一个
需要注意的是，在执行最后一行代码把
执行上面的代码后会弹出提示框，显示“hello world!”文本。
在firefox、safari、chrome和opera浏览器中，上面操作的dom代码是可以正常执行的。但是在旧版本的ie浏览器中，这些代码会发生错误。旧版本的ie浏览器将元素看做特殊元素，不允许dom访问它的子节点。不过，可以使用元素的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页面中的元素有两个：一个是元素，用于包含来自外部的文件；另一个是
以上的代码可以在firefox、safari、chrome和opera浏览器中正常运行，在旧版本的ie浏览器中会报错。旧版本的ie浏览器会将元素看做一个特殊的节点，不允许访问它的子节点。要解决旧版本ie的问题，就是访问元素的stylesheet属性，该属性又有一个csstext属性，可以接受css代码。例如下面的代码：
var style = document.createelement(style);style.type = text/css;try{style.appendchild(document.createtextnode(body{background:#f00;}));}catch(e){style.stylesheet.csstext = body{background:#f00;};}
同样，我们也可以将动态添加样式的代码封装到一个函数中，通过不同的参数来动态加载不同的样式。
function loadstyle(code){var style = document.createelement(style);style.type = text/css;try{style.appendchild(document.createtextnode(code));}catch(e){style.stylesheet.csstext = code;}var head = document.getelementsbytagname(head)[0];head.appendchild(style); }
javascript对表格的操作
在javascript中，为了使我们能够方便的构建表格，html dom为表格的、和提供了一些属性和方法。
表格的元素的属性和方法有：
caption：保存元素的引用的指针。
tbodies：是一个元素的htmlcollection。
tfoot：保存元素的引用的指针。
thead：保存元素的引用的指针。
rows：是表格中所有行的htmlcollection。
createthead()：创建元素，将它放入表格中，并返回其引用。
createtfoot()：创建元素，将它放入表格中，并返回其引用。
createcaption()：创建元素，将它放入表格中，并返回其引用。
deletethead()：删除元素。
deletetfoot()：删除元素
deletecaption()：删除元素
deleterow(pos)：删除指定位置的表格行。
insertrow(pos)：向rows集合中指定位置插入一行。
表格的元素的属性和方法有：
rows：保存着元素中行的htmlcollection。
deleterow(pos)：删除指定位置的表格行。
insertrow(pos)：向rows集合中指定位置插入一行。
表格的元素的属性和方法有：
cells：保存着元素中单元格的htmlcollection。
deletecell(pos)：删除指定位置的单元格。
insertcell(pos)：向cells集合中指定位置插入一个单元格，并返回新插入单元格的引用。
使用上面的这些属性和方法，可以使我们轻松的使用javascript来创建表格，例如下面的代码：
//创建表格vatabldocument.createelement(table);table.borde1;table.widt100%;//创建tbodyvatboddocument.createelement(tbody);table.appendchild(tbody);//创建第一个表格行tbody.insertrow(0);tbody.rows[0].insertcell(0);tbody.rows[0].cells[0].appendchild(document.createtextnode(单元1-1));tbody.rows[0].insertcell(1);tbody.rows[0].cells[1].appendchild(document.createtextnode(单元2-1));//创建第二个表格行tbody.insertrow(1);tbody.rows[1].insertcell(0);tbody.rows[1].cells[0].appendchild(document.createtextnode(单元1-2));tbody.rows[1].insertcell(1);tbody.rows[1].cells[1].appendchild(document.createtextnode(单元2-2));//将表格添加到文档中document.body.appendchild(table)
使用上面的代码可以动态的在页面中创建一个表格。其中在创建表格行的时候，通过元素调用了insertcell()方法，并传入参数0（表示将插入的行放在什么位置上）。执行了这一行代码后，会自动创建一个表格行，并将它插入到元素的0位置上，此时就可以通过tbody.rows[0]来引用新插入的行。
创建单元格的方式也与创建表格行的方式相同。通过元素来调用insertcell()方法，并传入要放置单元格的位置。然后就可以通过tbody.rows[0].cells[0]来引用新插入的单元格。
关于nodelist
理解nodelist和namednodemap、htmlcollection是从整体上理解dom的关键所在。这3个集合都是动态的，也就是说，每当文档结构发生了变化，它们始终都会保存最新的信息。从本质上来说，所有的nodelist对象都是在访问dom文档时实时运行的查询。例如下面的代码会导致死循环的出现：
var divs = document.getelementsbytagname(div);for(var i = 0; i < divs.length; i++){var div = document.createelement(div);document.body.appendchild(div);}
上面的代码首先获取了所有元素的htmlcollection，保存在一个变量中。由于这个集合是动态的，所以只要有新的被添加到页面中，新的元素就会被添加到这个集合中。这样导致的后果是div.length值是不断变化的，每次循环会在页面中添加一个元素，length的值也会递增。这样i < divs.length条件就永远不会成立，导致死循环的发生。
如果我们要迭代一个nodelist，最好将length属性初始化为第二个变量，然后将迭代器和这个变量做比较，例如：
var divs = document.getelementsbytagname(div);for(var i = 0,len = divs.length; i < len; i++){var div = document.createelement(div);document.body.appendchild(div);}
由于len中保存了divs.length在循环开始时的一个快照，因此会避免死循环情况的发生。
更多示例：
function salert(str){var msgw,msgh,bordercolor;msgw=400;//提示窗口的宽度msgh=100;//提示窗口的高度titleheight=25 //提示窗口标题高度bordercolor=#c51100;//提示窗口的边框颜色titlecolor=#c51100;//提示窗口的标题颜色var swidth,sheight;swidth=screen.width;sheight=screen.height;var bgobj=document.createelement(div);bgobj.setattribute('id','bgdiv');bgobj.style.position=absolute;bgobj.style.top=0;bgobj.style.background=#cccccc;bgobj.style.filter=progid:dximagetransform.microsoft.alpha(style=3,opacity=25,finishopacity=75;bgobj.style.opacity=0.6;bgobj.style.left=0;bgobj.style.width=swidth + px;bgobj.style.height=sheight + px;bgobj.style.zindex = 10000;document.body.appendchild(bgobj);var msgobj=document.createelement(div)msgobj.setattribute(id,msgdiv);msgobj.setattribute(align,center);msgobj.style.background=white;msgobj.style.border=1px solid + bordercolor;msgobj.style.position = absolute;msgobj.style.left = 50%;msgobj.style.top = 50%;msgobj.style.font=12px/1.6em verdana, geneva, arial, helvetica, sans-serif;msgobj.style.marginleft = -225px ;msgobj.style.margintop = -75+document.documentelement.scrolltop+px;msgobj.style.width = msgw + px;msgobj.style.height =msgh + px;msgobj.style.textalign = center;msgobj.style.lineheight =25px;msgobj.style.zindex = 10001;msgobj.style.position = absolute;var box=document.getelementbyid(str);var title=document.createelement(h4);title.setattribute(id,msgtitle);title.setattribute(align,right);title.style.margin=0;title.style.padding=3px;title.style.background=bordercolor;title.style.filter=progid:dximagetransform.microsoft.alpha(startx=20, starty=20, finishx=100, finishy=100,style=1,opacity=75,finishopacity=100);;title.style.opacity=0.75;title.style.border=1px solid + bordercolor;title.style.height=18px;title.style.font=12px verdana, geneva, arial, helvetica, sans-serif;title.style.color=white;title.style.cursor=pointer;title.onmousedown=function(){startdrag(this,'msgdiv')};title.onmouseup=function(){stopdrag(this,'msgdiv')};title.onmousemove=function(){drag('msgdiv')};var closer=document.createelement(div);closer.onclick=function(){closereturn();document.body.appendchild(box);box.style.display = none;document.body.removechild(bgobj);document.getelementbyid(msgdiv).removechild(title);document.body.removechild(msgobj);};closer.innerhtml=确定;document.body.appendchild(msgobj);document.getelementbyid(msgdiv).appendchild(title);document.getelementbyid(msgtitle).appendchild(closer);box.style.display=inline;document.getelementbyid(msgdiv).appendchild(box);showreturn();}
html dom树：