admin 管理员组文章数量: 1184232
2024年3月11日发(作者：汽车title什么意思中文)
使用js动态的修改div和span标记中的文本内容
2022-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操作，那么对于每次操作不需要覆盖原有的情况，可以使用这种
方式来实现。
实例：
/TR/xhtml1/DTD/">
functionfillDivWithInnerHTML(){
varusername = mentById("username").value;
vartextDiv = mentById("textDiv");
TML=username;
}
functionfillDivWithTextNode(){
vartextDiv = mentById("textDiv");
//首先删除所有已新建的Text Node节点
while(ldNodes()){
Child(odes[0]);
}
vartextNode = TextNode(mentById("username").value);
Child(textNode);
}
functionfillSpanWithInnerHTML(){
varusername = mentById("username").value;
vartextSpan = mentById("textSpan");
TML=username;
}
functionfillSpanWithTextNode(){
vartextSpan = mentById("textSpan");
//首先删除所有已新建的Text Node节点
while(ldNodes()){
Child(odes[0]);
}
vartextNode = TextNode(mentById("username").value);
Child(textNode);
}
nnerHTML()"/> ode()"/> ithInnerHTML()"/> xtNode()"/>