使用js动态的修改div和span标记中的文本内容

2008-08-28 22:04


使用ajax，通过会把服务器端响应获取到reponseText或者reponseXML中的信息，以某种方法动态的写到div和span标记中，这样，可以在无刷新的情况下，改变页面内容的显示。

通过javascript进行动态的修改，修改的方法有两种：

1.       一种是使用html的每个标记的innerHTML属性，使用此属性，只要为它提供一个有意义的html代码片段，那么html解释器就可以将其中的内容进行解释，并显示在页面上，使用这种方式比较简单，每次修改前不需要先把原来的内容清除掉，而可以直接进行填充，填充的同时会把原来的内容覆盖掉。这种方式虽然简单，但是目前还不是w3c的标准，不过主流的浏览器如IE,firefox都已经采用。

 

 

2.       另外一种是创建一个Text Node节点作为div和span元素的子节点，采用这种方式，div和span中要显示的内容保存在Text Node中，这样div和span元素显示的内容是由Text Node提供的。需要注意的是：在每次填写内容时，需要先把原来的Text Node删除掉，然后新建一个Text Node再写入内容。如果不删除的话，那么每次调用填充操作时，都会新建一个新的Text Node，也就造成div和span元素下有多个Text Node节点，并且每个Text Node都会把自身的内容显示出来，因此不会覆盖原来的内容。

3.       通过不删除已有的Text Node，每次填充时创建一个新的Text Node，可以进行多次append操作，那么对于每次操作不需要覆盖原有的情况，可以使用这种方式来实现。

 

实例：

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 
<script type="text/javascript">
    function fillDivWithInnerHTML() {
       var username = document.getElementById("username").value;
       var textDiv = document.getElementById("textDiv");
       textDiv.innerHTML=username;
    }
    function fillDivWithTextNode() {
   
       var textDiv = document.getElementById("textDiv");
       //首先删除所有已新建的Text Node节点
       while(textDiv.hasChildNodes()) {
           textDiv.removeChild(textDiv.childNodes[0]);
       }
       var textNode = document.createTextNode(document.getElementById("username").value);
       textDiv.appendChild(textNode);
    }
   
    function fillSpanWithInnerHTML() {
       var username = document.getElementById("username").value;
       var textSpan = document.getElementById("textSpan");
       textSpan.innerHTML=username;
    }
   
    function fillSpanWithTextNode() {
       var textSpan = document.getElementById("textSpan");
       //首先删除所有已新建的Text Node节点
       while(textSpan.hasChildNodes()) {
           textSpan.removeChild(textSpan.childNodes[0]);
       }
      
       var textNode = document.createTextNode(document.getElementById("username").value);
       textSpan.appendChild(textNode);
    }
   
   
</script>
</head>
 
<body>
<input type="text" id="username" name="username"/><br/>
 
<input type="button" id="fillDivWithInnerHTML" value="fillDivWithInnerHTML" onclick="fillDivWithInnerHTML()"/>
<br/>
<input type="button" id="fillDivWithTextNode" value="fillDivWithTextNode" onclick="fillDivWithTextNode()"/>
<br/>
<input type="button" id="fillSpanWithInnerHTML" value="fillSpanWithInnerHTML"onclick="fillSpanWithInnerHTML()"/>
<br/>
<input type="button" id="fillSpanWithTextNode" value="fillSpanWithTextNode" onclick="fillSpanWithTextNode()"/>
 
<span id="textSpan"></span><br/>
<div id="textDiv"></div>
</body>
</html>