javascript中获取元素标签中间的内容的实现方法

时间：2021-05-26

使用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都会把自身的内容显示出来，因此不会覆盖原来的内容。

<html><head><style>.css1{background-color:ff0000;color:ff9966;border:1;cursor:hand;}.css2{background-color:00ff00;color:ffffff;border:1;cursor:hand;}</style><script type="text/javascript">function changeneirong(){ var spanv = document.getElementsByTagName("span"); spanv[2].innerHTML = "我由常军魁变为了span";}function changediv(){ document.getElementsByTagName("div")[0].innerHTML = "我由常军魁变成了div";}function changep(){ document.getElementsByTagName("p")[0].innerHTML = "我由常军魁变成了p标签";}function change(){var spanvar = document.getElementsByTagName("span");alert(spanvar[0].innerHTML);document.getElementsByTagName("span")[0].className = "css2";} 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><span class="css1" onclick="change()">常军魁</span><span class="css1" onclick="javascript:this.className='css2'">这是一段文字</span><br /><span onclick="changeneirong()" style="corsur:hand;">常军魁</span><br /><div onclick="changediv()">常军魁</div><p onclick="changep()">常军魁</p> <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>

以上就是小编为大家带来的javascript中获取元素标签中间的内容的实现方法全部内容了，希望大家多多支持~

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章