javascript中获取元素标签中间的内容的实现方法
使用ajax，通过会把服务器端响应获取到reponseText或者reponseXML中的信息，以某种方法动态的写到div和span标记中，这样，可以在无刷新的情况下，改变页面内容的显示。
通过javascript进行动态的修改，修改的方法有两种：
1.一种是使用html的每个标记的innerHTML属性，使用此属性，只要为它提供一个有意义的html代码片段，那么html解释器就可以将其中的内容进行解释，并显示在页面上，使用这种方式比较简单，每次修改前不需要先把原来的内容清除掉，而可以直接进行填充，填充的同时会把原来的内容覆盖掉。这种方式虽然简单，但是目前还不是w3c的标准，不过主流的浏览器如IE,firefox都已经采用。
2.另外一种是创建一个TextNode节点作为div和span元素的子节点，采用这种方式，div和span中要显示的内容保存在TextNode中，这样div和span元素显示的内容是由TextNode提供的。需要注意的是：在每次填写内容时，需要先把原来的TextNode删除掉，然后新建一个TextNode再写入内容。如果不删除的话，那么每次调用填充操作时，都会新建一个新的TextNode，也就造成div和span元素下有多个TextNode节点，并且每个TextNode都会把自身的内容显示出来，因此不会覆盖原来的内容。
<html>
<head>
<style>
.css1{background-color:ff0000;color:ff9966;border:1;cursor:hand;}
.css2{background-color:00ff00;color:ffffff;border:1;cursor:hand;}
</style>
<scripttype="text/javascript">
functionchangeneirong()
{
varspanv=document.getElementsByTagName("span");
spanv[2].innerHTML="我由常军魁变为了span";
}
functionchangediv()
{
document.getElementsByTagName("div")[0].innerHTML="我由常军魁变成了div";
}
functionchangep()
{
document.getElementsByTagName("p")[0].innerHTML="我由常军魁变成了p标签";
}
functionchange()
{
varspanvar=document.getElementsByTagName("span");
alert(spanvar[0].innerHTML);
document.getElementsByTagName("span")[0].className="css2";
}
functionfillDivWithInnerHTML(){
varusername=document.getElementById("username").value;
vartextDiv=document.getElementById("textDiv");
textDiv.innerHTML=username;
}
functionfillDivWithTextNode(){
vartextDiv=document.getElementById("textDiv");
//首先删除所有已新建的TextNode节点
while(textDiv.hasChildNodes()){
textDiv.removeChild(textDiv.childNodes[0]);
}
vartextNode=document.createTextNode(document.getElementById("username").value);
textDiv.appendChild(textNode);
}
functionfillSpanWithInnerHTML(){
varusername=document.getElementById("username").value;
vartextSpan=document.getElementById("textSpan");
textSpan.innerHTML=username;
}
functionfillSpanWithTextNode(){
vartextSpan=document.getElementById("textSpan");
//首先删除所有已新建的TextNode节点
while(textSpan.hasChildNodes()){
textSpan.removeChild(textSpan.childNodes[0]);
}
vartextNode=document.createTextNode(document.getElementById("username").value);
textSpan.appendChild(textNode);
}
</script>
</head>
<body>
<spanclass="css1"onclick="change()">常军魁</span>
<spanclass="css1"onclick="javascript:this.className='css2'">这是一段文字
</span>
<br/>
<spanonclick="changeneirong()"style="corsur:hand;">常军魁</span>
<br/>
<divonclick="changediv()">常军魁</div>
<ponclick="changep()">常军魁</p>
<inputtype="text"id="username"name="username"/><br/>
<inputtype="button"id="fillDivWithInnerHTML"value="fillDivWithInnerHTML"onclick="fillDivWithInnerHTML()"/>
<br/>
<inputtype="button"id="fillDivWithTextNode"value="fillDivWithTextNode"onclick="fillDivWithTextNode()"/>
<br/>
<inputtype="button"id="fillSpanWithInnerHTML"value="fillSpanWithInnerHTML"onclick="fillSpanWithInnerHTML()"/>
<br/>
<inputtype="button"id="fillSpanWithTextNode"value="fillSpanWithTextNode"onclick="fillSpanWithTextNode()"/>
<spanid="textSpan"></span><br/>
<divid="textDiv"></div>
</body>
</html>
以上就是小编为大家带来的javascript中获取元素标签中间的内容的实现方法全部内容了，希望大家多多支持毛票票~