记录我的旅程4之JavaScript Dom学习笔记

好长时间有没有写博客了,从今天起我的博客之路继续了,嘿嘿下面我们接着旅程3继续我们的Dom征程4，这篇博文讲的是Dom的动态创建。

Dom的动态创建

(1) document.write只能在页面加载过程中才能动态创建

(2) 可以调用document的createElement方法来创建具有指定标签的Dom对象，然后通过调用某个元素的appendChild方法将新创建的元素添加到相应的元素下。

function btnClick() {

var divMain = document.getElementById("divMain"); //获得层

var input = document.createElement("input");

input.value = "我的动态按钮";

input.type = "button";

divMain.appendChild(input); //将产生的元素添加到divMain层

}

</script>

<body>

</body>

(3)innerText，innerHTML

1) 几乎所有的Dom元素都有innerText,innerHTML属性（注意大小写），分别是元素标签内容的文本表示形式和HTML源代码，这两个属性是可读可写的。

2) 用innerHTML也可以替代createElement，属于简单粗放型。

function createInput() {

var divMain = document.getElementById("divMain");

divMain.innerHTML = "<input type='button' value='按钮' />";

}

</script>

注释:这个动态创建按钮只能创建一个按钮，不能重复的创建。

练习1：点击按钮增加一个网站的超链接

function createLink() {

var divMianLink = document.getElementById("divMainlink");

var link = document.createElement("a");

link.href = "http://www.cnblogs.com";

link.innerText = "百度 ";

divMainlink.appendChild(link);

}

</script>

练习2：点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的的网站名，增加三行常见网站。

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>

注释:动态产生的元素,查看源代码是看不到的,通过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”>

然后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>";

}

练习3：练习点评无刷新评论。

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>

</table>

昵称：<input type="text" id="nickname" /><br />

内容：<textarea id="comment"></textarea><br />

posted @ 2012-07-06 10:11 Kencery 阅读(712) 评论(0) 编辑收藏举报

刷新页面返回顶部

怪才(Kencery)

菜鸟的里程中只有奋斗，别无其他

记录我的旅程4之JavaScript Dom学习笔记

公告