好长时间有没有写博客了,从今天起我的博客之路继续了,嘿嘿下面我们接着旅程3继续我们的Dom征程4，这篇博文讲的是Dom的动态创建。
- Dom的动态创建
(1) document.write只能在页面加载过程中才能动态创建
(2) 可以调用document的createElement方法来创建具有指定标签的Dom对象，然后通过调用某个元素的appendChild方法将新创建的元素添加到相应的元素下。
<script type="text/javascript">
function btnClick() {
var divMain = document.getElementById("divMain"); //获得层
var input = document.createElement("input");
input.value = "我的动态按钮";
input.type = "button";
divMain.appendChild(input); //将产生的元素添加到divMain层
}
</script>
<body>
<div id="divMain"></div>
<input type="button" value="点击" onclick="btnClick()" />
</body>
(3)innerText，innerHTML
1) 几乎所有的Dom元素都有innerText,innerHTML属性（注意大小写），分别是元素标签内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="http://www.baidu.com" id="link1">百<font color="red">度</font></a>
<input type="button" value="inner" onclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
<input type="button" value="innerText" onclick="document.getElementById('link1').innerText='百度'" />
<input type="button" value="innerHTML" onclick="document.getElementById('link1').innerHTML='<font color='Yellow'>博客园</font>'" />
2) 用innerHTML也可以替代createElement，属于简单粗放型。
<script type="text/javascript">
function createInput() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<input type='button' value='按钮' />";
}
</script>
<div id="divMain"></div>
<input type="button" value="动态创建" onclick="createInput()" />
注释:这个动态创建按钮只能创建一个按钮，不能重复的创建。
练习1：点击按钮增加一个网站的超链接
<script type="text/javascript">
function createLink() {
var divMianLink = document.getElementById("divMainlink");
var link = document.createElement("a");
link.href = "http://www.cnblogs.com";
link.innerText = "百度 ";
divMainlink.appendChild(link);
}
</script>
<div id="divMainlink"></div>
<input type="button" value="产生" onclick="createLink()" />
练习2：点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的的网站名，增加三行常见网站。
<script type="text/javascript">
function loadData() {
var data = { "百度": "http://www.baidu.com", "博客园": "http://www.cnblogs.com", "新浪": "http://www.sina.com" };
var tableLinks = document.getElementById("tableLinks");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td"); //先创建td，放入内容，在加入tr
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
tr.appendChild(td2);
tableLinks.appendChild(tr);
}
}
</script>
<table id="tableLinks"></table>
<input type="button" value="加载" onclick="loadData()" />
注释:动态产生的元素,查看源代码是看不到的,通过F12开发人员工具或者DebugDar—>Dom—>文档—>HTML可以看到。
注释：浏览器兼容性的例子，ie6,ie7不支持table.appendChild(“tr”).
详注：浏览器兼容新问题
(1) 浏览器兼容性的例子，ie6,ie7对table.appendChild(“tr”)的支持和IE8不一样，用insertRow,insertCell来代替或者为表格添加tbody，然后向tbody中添加tr,FF不支持innerText。所以动态加载网站的列表程序修改为：
var tr = tableLinks2.insertRow(-1);
var td1 = tr.insertCell(-1);
td1.innerText = key;
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
或者<table id=”tableLinks”>
<tbody></tbody> </table>
然后tableLinks.tBodies[0].appendChild(tr);
重写上述案例：代码如下
function loadData1() {
var data = { "百度": "http://www.baidu.com", "博客园": "http://www.cnblogs.com", "新浪": "http://www.sina.com" };
var tableLinks = document.getElementById("tableLinks2");
for (var key in data) {
var value = data[key];
var tr = tableLinks2.insertRow(-1);
var td1 = tr.insertCell(-1);
td1.innerText = key;
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
}
}
<table id="tableLinks2"></table>
<input type="button" value="兼容IE6，7加载" onclick="loadData1()" />
练习3：练习点评无刷新评论。
<script type="text/javascript">
function addComment() {
var nickname = document.getElementById("nickname").value;
var comment = document.getElementById("comment").value;
var tableComment = document.getElementById("tableComment");
var tr = document.createElement("tr");
var tdnickName = document.createElement("td");
tdnickName.innerText = nickname;
tr.appendChild(tdnickName);
var tdCommnent = document.createElement("td");
tdCommnent.innerText = comment;
tr.appendChild(tdCommnent);
tableComment.tbodies[0].appendChild(tr);
}
</script>
<p>评论区</p>
<table id="tableComment">
<tbody> </tbody>
</table>
昵称：<input type="text" id="nickname" /><br />
内容：<textarea id="comment"></textarea><br />
<input type="button" value="评论" onclick="addComment()" />