posts - 297,  comments - 1618,  trackbacks - 0

蜜果私塾:DOM,黑色艺术的终结者(3

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

文:阿蜜果/2011-11-2

转载请注明出处

1、 不使用DOM的做法

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

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

1.1 使用document.write()方法

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

<html>
    
<head>
        
<title>document.write()方法测试</title>
    
</head>
    
<body>
        
<script type="text/javascript">
            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 type="text/javascript" src="example.js">
        
</script>
    
</head>
    
<body>
        
<script type="text/javascript">
            insertPara(
"使用write()方法输出的内容");
        
</script>
    
</body>
<html>

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

1)将JavaScriptHTML代码混杂在一起,使得HTML不容易编辑,也无法享受把行为和结构分离出来的好处;

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

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

1.2 使用innerHTML属性

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

         该属性可用于读、写给定元素的HTML内容,例如使用innerHTML属性更新idtestdiv元素的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 type="text/javascript" src="innerHtmlExample.js">
        
</script>
    
</head>
    
<body>
        
<div id="testdiv">
        
</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()合作使用,这个方法单独使用是没有实际用处的,因为它并没有将创建的元素插入到文档中。使用该方法将创建出的元素赋予一个变量后,该变量指向刚创建出来的元素的引用指针。这个元素是具有自己的nodeTypenodeName,如下所示:

<html>
    
<head>
        
<title>createElement()方法测试</title>
        
<script type="text/javascript">
            
var para = document.createElement("p");
            alert(
"nodeName=" + para.nodeName + ", nodeType=" + para.nodeType);
        
</script>
    
</head>
    
<body>
    
</body>
<html>

    测试时,提示框显示信息为:

nodeName=P, nodeType=1

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

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

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

parent.appendChild(node)

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

例如我想将p元素添加到idtestdivdiv元素下去,参考代码如下:

<html>
    
<head>
        
<title>appendChild()测试</title>
        
<script type="text/javascript">
            window.onload 
= function() {
                
var para = document.createElement("p");
                
var testdiv = document.getElementById("testdiv");
                testdiv.appendChild(para);
            }

        
</script>
    
</head>
    
<body>
        
<div id="testdiv">
        
</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>
        
<script type="text/javascript">
            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 id="testdiv">
        
</div>
    
</body>
<html>

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

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

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

parentElement.inertBefore(newChild, refChild)

      其中:

1parentElement:这两个参数中指定的元素的父元素;

2newChild参数:表示插入新的节点;

3refChild参数:表示在此节点前插入新节点。

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

<html>
    
<head>
        
<title>insertBefore()测试</title>
        
<script type="text/javascript">
            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 id="testdiv">
        
</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
谢谢,看到很仔细,呵呵,已更正错别字。  回复  更多评论
  

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


网站导航:
 
<2011年11月>
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

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

      Power Designer系统分析与建模实战  (2015年7月出版)
      
     Struts2+Hibernate3+Spring2   (2010年5月出版)
     

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

  • 积分 - 2285123
  • 排名 - 3

最新评论

阅读排行榜

评论排行榜