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

《使用js动态的修改div和span标记中的文本内容》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、使用js动态的修改div和span标记中的文本内容2008-08-2822:04使用ajax，通过会把服务器端响应获取到reponseText或者reponseXML中的信息，以某种方法动态的写到div和span标记中，这样，可以在无刷新的情况下，改变页面内容的显示。通过javascript进行动态的修改，修改的方法有两种：1.一种是使用html的每个标记的innerHTML属性，使用此属性，只要为它提供一个有意义的html代码片段，那么html解释器就可以将其中的内容进行解释，并显示在页面上，使用这种方式比较简单，每次修改前不需要先把原来的内

2、容清除掉，而可以直接进行填充，填充的同时会把原来的内容覆盖掉。这种方式虽然简单，但是目前还不是w3c的标准，不过主流的浏览器如IE,firefox都已经采用。2.另外一种是创建一个TextNode节点作为div和span元素的子节点，采用这种方式，div和span中要显示的内容保存在TextNode中，这样div和span元素显示的内容是由TextNode提供的。需要注意的是：在每次填写内容时，需要先把原来的TextNode删除掉，然后新建一个TextNode再写入内容。如果不删除的话，那么每次调用填充操作时，都会新建一个新的TextNode，

3、也就造成div和span元素下有多个TextNode节点，并且每个TextNode都会把自身的内容显示出来，因此不会覆盖原来的内容。3.通过不删除已有的TextNode，每次填充时创建一个新的TextNode，可以进行多次append操作，那么对于每次操作不需要覆盖原有的情况，可以使用这种方式来实现。实例：

4、lns="http://www.w3.org/1999/xhtml">functionfillDivWithInnerHTML(){varusername=document.getElementById("username").value;vartextDiv=document.getElementById

5、("textDiv");textDiv.innerHTML=username;}functionfillDivWithTextNode(){vartextDiv=document.getElementById("textDiv");//首先删除所有已新建的TextNode节点while(textDiv.hasChildNodes()){textDiv.removeChild(textDiv.childNodes[0]);}vartextNode=document.createTextNode(document.getElementById("u

6、sername").value);textDiv.appendChild(textNode);}functionfillSpanWithInnerHTML(){varusername=document.getElementById("username").value;vartextSpan=document.getElementById("textSpan");textSpan.innerHTML=username;}functionfillSpanWithTextNode(){vartextSpan=document.getElementBy

7、Id("textSpan");//首先删除所有已新建的TextNode节点while(textSpan.hasChildNodes()){textSpan.removeChild(textSpan.childNodes[0]);}vartextNode=document.createTextNode(document.getElementById("username").value);textSpan.appendChild(textNode);}

8、me"name="username"/>