蜜果私塾：DOM，黑色艺术的终结者（3）

——使用DOM动态创建HTML内容

文：阿蜜果/2011-11-2

转载请注明出处

1、不使用DOM的做法

网页的结构由HTML文档负责创建，JavaScript函数只用来改变HTML文档的某些细节而不改变其底层结构，JavaScript也可以用来改变网页的结构和内容。

创建HTML内容的“老”技巧是使用document.write()方法和innerHTML属性。

1.1 使用document.write()方法

document的write()方法可以方便快捷的将字符串插入到文档中，如下面示例中在网页上使用该方法显示“使用write()方法输出的内容”：

<html>

<head>

<title>document.write()方法测试</title>

</head>

<body>

document.write("<p>使用write()方法输出的内容</p>");

</script>

</body>

<html>

使用document.write()方法的最大缺点是违背了“分离JavaScript”原则，当然也可以将这一句提供一个公用的JS方法，放在一个独立的js文件中，例如在example.js中编写如下js方法：

function insertPara(content) {

var str = "<p>" + content + "</p>";

document.write(str);

}

将之前的HTML文件修改为如下内容：

<html>

<head>

<title>document.write()方法测试</title>

</script>

</head>

<body>

insertPara("使用write()方法输出的内容");

</script>

</body>

<html>

但就算这样做还是没有解决“分离JavaScript”的问题，需要在<body>元素中插入JS代码，使用document.write()动态构建HTML内容的缺点如下：

（1）将JavaScript和HTML代码混杂在一起，使得HTML不容易编辑，也无法享受把行为和结构分离出来的好处；

（2）这样拼接HTML字符串很容易导致“数据/格式非法”的错误；

（3）MIME类型设置为application/xhtml+xml与document.write()方法不兼容，浏览器在呈现xhtml文档时不会执行document.write()方法。

1.2 使用innerHTML属性

现在几乎所有的浏览器都支持属性innerHTML，但这个属性并不是W3C DOM标准的组成部分，他初见于IE 4浏览器，被被其它浏览器所接受。

该属性可用于读、写给定元素的HTML内容，例如使用innerHTML属性更新id为testdiv元素的HTML内容为：“<p>测试<em>innerHTML</em>属性</p>”，innerHtmlExample.js文件中的JS代码如下：

window.onload = function() {

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

testdiv.innerHTML = "<p>测试<em>innerHTML</em>属性</p>";

}

对应的HTML的代码如下所示：

<html>

<head>

<title>innerHTML测试</title>

</script>

</head>

<body>

</div>

</body>

<html>

innerHTML属性比document.write()方法更值得推荐，使用该属性还可以遵循“分离JavaScript”的原则。在需要将一大段HTML代码插入一份文档，使用innerHTML属性设置既简单又快速，但是使用该属性的缺点也很明显：

（1）不会返回任何可以用来对刚插入的内容进行处理的内容，导致无法对刚插入的内容进行处理，无法提供DOM的众多操作功能；

（2）只使用于HTML文档，在浏览器呈现xhtml文档时不会执行该属性；

（3）是一项专利技术，而不是一项业界标准。

2、使用DOM动态创建HTML内容

2.1 createElement()方法：创建元素

该方法用于创建一个元素节点，该方法返回一个Element对象，语法如下：

createElement(name)

其中name属性是字符串值，用于为元素节点规定名称。

【提示】如果name参数中含有不合法的字符，该方法将抛出代码DOMException 异常，代码为INVALID_CHARACTER_ERR 。

下面语句用于创建一个p元素：

document.createElement(“p”);

该方法常与而后说到的appendChild()和createTextNode()合作使用，这个方法单独使用是没有实际用处的，因为它并没有将创建的元素插入到文档中。使用该方法将创建出的元素赋予一个变量后，该变量指向刚创建出来的元素的引用指针。这个元素是具有自己的nodeType和nodeName，如下所示：

<html>

<head>

<title>createElement()方法测试</title>

var para = document.createElement("p");

alert("nodeName=" + para.nodeName + ", nodeType=" + para.nodeType);

</script>

</head>

<body>

</body>

<html>

测试时，提示框显示信息为：

nodeName=P, nodeType=1

由此可知此时新节点已经存在，并且从nodeType为1，可看出它是一个元素节点。

2.2 appendChild()方法：追加子节点

该方法指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点，语法：

parent.appendChild(node)

其中node参数为必填参数，表示要添加的节点。

例如我想将p元素添加到id为testdiv的div元素下去，参考代码如下：

<html>

<head>

<title>appendChild()测试</title>

window.onload = function() {

var para = document.createElement("p");

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

testdiv.appendChild(para);

}

</script>

</head>

<body>

</div>

</body>

<html>

2.3 createTextNode()方法：创建文本节点

在2.2小节中我们创建的是一个空白的p元素，若需要为p元素设置文本，需要使用createTextNode()方法创建一个文本节点。该方法的语法与createElement()方法类似：

document.createTextNode(text)

该方法返回Text对象，其中text参数为字符串值，可规定次节点的文本。例如创建“你好”的文本节点，语句如下：

document.createTextNode(“你好”);

可以将该方法返回的值赋给一个变量，那么这个变量将指向那个文本节点的引用指针。与createElement()方法相似，该方法也只是负责创建新的节点，但并不会加入到文档中，需要使用appendChild()等方法加入。

改造2.2小节中实例，给p元素加上“你好”的文本，代码参考如下：

<html>

<head>

<title>appendChild()测试</title>

window.onload = function() {

var para = document.createElement("p");

var txt = document.createTextNode("你好");

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

para.appendChild(txt);

testdiv.appendChild(para);

}

</script>

</head>

<body>

</div>

</body>

<html>

【提示】因为变量里存储的是引用指针，所以将上述代码的两句appendChild对换一下，也不会影响页面的显示。

2.4 insertBefore()方法：添加新节点到现有元素前

该方法可在已有的子节点插入一个新的子节点，它返回新的子节点。语法如下：

parentElement.inertBefore(newChild, refChild)

其中：

（1）parentElement：这两个参数中指定的元素的父元素；

（2）newChild参数：表示插入新的节点；

（3）refChild参数：表示在此节点前插入新节点。

在如下实例中，首先在id为testdiv的div元素内添加p元素，并设置其文本节点为“你好”，接着将另一个文本子节点为“Amigo,”的p元素添加到它的前面，参考代码如下：

<html>

<head>

<title>insertBefore()测试</title>

window.onload = function() {

var para1 = document.createElement("p");

var para2 = document.createElement("p");

var txt1 = document.createTextNode("你好");

var txt2 = document.createTextNode("Amigo,");

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

para1.appendChild(txt1);

para2.appendChild(txt2);

testdiv.appendChild(para1);

testdiv.insertBefore(para2, para1);

}

</script>

</head>

<body>

</div>

</body>

<html>

测试页面显示为：

Amigo,

你好

3、参考文档

（1）《XML DOM createElement()方法》

http://www.w3school.com.cn/xmldom/met_document_createelement.asp

（2）《XML DOM appendChild()方法》

http://www.w3school.com.cn/xmldom/met_element_appendchild.asp

（3）《XML DOM createTextNode()方法》

http://www.w3school.com.cn/xmldom/met_document_createtextnode.asp

（4）《JavaScript DOM编程艺术》 [英] Jeremy Keith 著，杨涛、王晓云等译，人民邮电出版社出版

posted on 2011-11-02 11:04 阿蜜果阅读(2007) 评论(3) 编辑收藏所属分类: Javascript

FeedBack:

# re: 蜜果私塾：DOM，黑色艺术的终结者（3）

2011-11-04 08:25 | tbw

写得很不错回复更多评论

# re: 蜜果私塾：DOM，黑色艺术的终结者（3）[未登录]

2011-11-06 16:53 | alex

（3）refChild参数：表示在此节点钱插入新节点。

完美主义者呵呵

（3）refChild参数：表示在此节点（前）插入新节点。回复更多评论

# re: 蜜果私塾：DOM，黑色艺术的终结者（3）

2011-11-06 17:46 | 阿蜜果

@alex
谢谢，看到很仔细，呵呵，已更正错别字。回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: 蜜果私塾：在JavaScript中使用适配器模式蜜果私塾：在JavaScript中使用工厂模式蜜果私塾：在JavaScript中使用单例模式蜜果私塾：JavaScript代码的坏味道【不断补充】蜜果私塾：DOM，黑色艺术的终结者（3）蜜果私塾：DOM，黑色艺术的终结者（2）蜜果私塾：DOM，黑色艺术的终结者（1） js操作iframe的一些知识 JavaScript学习笔记——继承 JavaScript学习笔记——浏览器中的JavaScript

2011年11月

日

一

二

三

四

五

六

      生活将我们磨圆，是为了让我们滚得更远——“圆”来如此。
      我的作品：
  玩转Axure RP （2015年12月出版）

Power Designer系统分析与建模实战（2015年7月出版）

Struts2+Hibernate3+Spring2 （2010年5月出版）

1、不使用DOM的做法

1.1 使用document.write()方法

1.2 使用innerHTML属性

2、使用DOM动态创建HTML内容

2.1 createElement()方法：创建元素

2.2 appendChild()方法：追加子节点

2.3 createTextNode()方法：创建文本节点

2.4 insertBefore()方法：添加新节点到现有元素前

3、参考文档

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

最新评论

阅读排行榜

评论排行榜

1、 不使用DOM的做法

1.1 使用document.write()方法

1.2 使用innerHTML属性

2、 使用DOM动态创建HTML内容

2.1 createElement()方法：创建元素

2.2 appendChild()方法：追加子节点

2.3 createTextNode()方法：创建文本节点

2.4 insertBefore()方法：添加新节点到现有元素前

3、 参考文档

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

最新评论

阅读排行榜

评论排行榜

1、不使用DOM的做法

2、使用DOM动态创建HTML内容

3、参考文档