使用createElement动态创建HTML对象

1.创建链接

<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
    var a = document.createElement("a");
    a.href = url;
    a.innerHTML = text;
    a.style.color = "red";
    o.appendChild(a);
}
createA("http:///","网页教学网");
</script>

2.创建DIV

<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
    var div = document.createElement("div");
    div.innerHTML = text;
    o.appendChild(div);
}
createDIV("网页教学网：http:///");
Webjx.Com

</script>

3.创建表单项

<script language="javascript">
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
    var input = document.createElement("input");
    input.type = sType;
    input.value = sValue;
    o.appendChild(input);
}
createInput("button","ooo");
</script>

4.创建表格

<script language="javascript">
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
    var table = document.createElement("table");
    var tbody = document.createElement("tbody");
    table.width = w;
    table.height = h;
    table.border = 1; 网页教学网
    for(var i=1;i<=r;i++)
    {
        var tr = document.createElement("tr");
        for(var j=1;j<=c;j++)
        {
            var td = document.createElement("td");
            td.innerHTML = i + "" + j;
            //td.appendChild(document.createTextNode(i + "" + j));
            td.style.color = "#FF0000";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);

innerHTML,outerHTML innerHTML检索或设置标签内的内容；
outerHTML检索或设置整个标签的内容（包含标签）。

<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
<input type="button" onclick="alert(document.all.fieldset.innerText);" value="innerText">
<input type="button" onclick="alert(document.all.fieldset.outerText);" value="outerText">
</fieldset>

两个alert输出的结果分别是：
innerHTML：

<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">

outerHTML：

<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
</fieldset>

innerText,outText输出标签内部的文本信息
上面两个Text按扭输出同样的内容：
Original Text
但是注意的是，赋值时，outerText会连带标签一起替换成目标文本，innerText只替换原来的文本。

<fieldset id="fieldset" style="width:200;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
</fieldset>
<input type="button" onclick="oSpan.innerText='changed'" value="inner change">
<input type="button" onclick="oSpan.outerText='changed'" value="outer change">
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">

点inner change后，点innerHTML输出结果为：
<SPAN ID="oSpan">changed</SPAN>
点outer change后，点innerHTML输出结果为：
changed

自己用代码来体会一下
HTML 代码片段如下:

<div id=test><table><tr><td>文本<a>链接</a>另一段文本</td></tr></table></div>
<input type=button onclick=alert(test.innerText) value="show innerText"><br>
<input type=button onclick=alert(test.innerHTML) value="show innerHTML"><br>
<input type=button onclick=alert(test.outerHTML) value="show outerHTML"><br>

<div id="div"><input name="button" value="Button" type="button"><font color="green"><h2>This is a DIV!</h2></font></div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">

这里对web程序方面的优化作一个总结，虽然我用的是PHP其实不管理是什么语言方向都是一样的。
1.编码规范化可读性优化
编码规范我想一般程序员不会不了解，如果你这方面是空白你应该好好补补基础了，做到编码规范是一个好的程序员的最基础要求，一个团队也应该有自己的编码规范。所以程序的优化也应该包含到这个方面，在你开发程序的过程中可能会有些遗漏，所以在我们进行编码规范化可读性优化是很有必要的。其实一份再好的程序代码若干年后你自己都未必能看的懂更不用说别人来看你的代码，使你自己写出的代码有更好的可读性，这个是一个好的程序员应该做的，并且是对一个团队和你自己作品的责任感。
优化方向就是使你的代码更清析更易懂。
2.程序效率、流程逻辑优化
程序效率的优化是最重要的，程序运行速度是程序代码好坏最重要的因素，程序逻辑其实就是你的解决思路，解决思路并不是唯一的，所以我们可以对它进行优化。逻辑的设计也和可读性有一定的关系，逻辑清晰可读性就更强。
优化的方向就很明确了提高速度，清晰逻辑。简单的逻辑并不代表一定是速度快，复杂的逻辑并不一定是慢的。所以在这两方面是关联。
3.SQL优化，减少查询次数
在使用数据库的程序中我们知道数据库的查询是在整个程序执行中占很大比例的，所以SQL的优化是非常重要的。
优化的方向一方面是SQL语句本身的优化，熟悉SQL的人应该会知道，不同的SQL写法执行的效率差别是很大的，如：尽量不对字段加函数操作，更多的大家可以去查找高效SQL这方面的资料。第二在一个页面中减少查询次数，这个道理很清楚，我们可以把整个页面的SQL都输出来进行分析，是否可以合并语句，是否可以做冗余字段等等，尽量减少SQL的查询次数，坚绝不在循环中使用查询。
4.缓存优化
缓存优化其实就是对上一点的补充，但缓存优化是很重要的，所以可以单独列为一点。缓存的数据主要就是从数据库中读取出来的。对缓存的一些介绍：http://www.coderhome.net/zifa/?p=195,当然缓存也应该适当，应该只把需要缓存的数据进行缓存。
5.html,css,js文件优化，减少冗余代码
这一点与服务端程序没有关系，主要是与浏览器相关的几方面。html的结构是会影响到浏览器的解析，所以好的html代码也会影响访问速度。相比之下客户端的代码就不允许有一点无用的东西存在，能把文件减少一K就应该减少。js虽然是在客户端执行但也应该去考虑它的效率问题，网络上也有这方面的文章介绍。
6.可用性优化
可用性优化主要指的是UED方面的，并不是每一个团队都有专门的UED，作为web程序的开发人员也应该有这方面的意识，去了解用户，而不是埋头写代码。努力使你开发的页面对用户更友好，更容易使用。
7.框架架构优化
如果有使用到开发框架，也应该考虑到对框架的优化，减少框架本身占用的资源。
其它：服务器架构优化、数据库优化
这些方面和程序开发没有直接关系，但和web程序的运行也是关系密切的，所以顺便提一提。

<html>
<head>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:2;
 overflow:hidden;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p>&nbsp;</p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;ddddddddddddddddd</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbxsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>v
</div>
</body>

</html>

代码二.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:7;
 overflow:hidden;
}
#ToolBa_2{

 position:absolute;
 top:300px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index3;
 overflow:hidden;
       color:#fff;
}
#ToolBa_3{

 position:absolute;
 top:600px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index32;
 overflow:hidden;
       color:#fff;
}
#ToolBa_4{

 width:300px;
 height:200px;
 background:#ff0000;
 z-index35;
 overflow:hidden;
       color:#fff;
}
#ToolBa_5{

 width:300px;
 height:200px;
 background:#ff0000;
 z-index39;
 overflow:hidden;
       color:#fff;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>

<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div>
<div id="Main">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>

</html>