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

前端之家收集整理的这篇文章主要介绍了javascript中获取元素标签中间的内容的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<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");

//首先<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>所有已新建的Text Node节点

while(textSpan.hasChildNodes()) {
  textSpan.removeChild(textSpan.childNodes[0]);
}
var textNode = document.createTextNode(document.getElementById("username").value);
textSpan.appendChild(textNode);

}

文字

<input type="text" id="username" name="username"/>

<input type="button" id="fillDivWithInnerHTML" value="fillDivWithInnerHTML" onclick="fillDivWithInnerHTML()"/>


<input type="button" id="fillDivWithTextNode" value="fillDivWithTextNode" onclick="fillDivWithTextNode()"/>


<input type="button" id="fillSpanWithInnerHTML" value="fillSpanWithInnerHTML" onclick="fillSpanWithInnerHTML()"/>

<input type="button" id="fillSpanWithTextNode" value="fillSpanWithTextNode" onclick="fillSpanWithTextNode()"/>

<span id="textSpan">

<div id="textDiv">

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

原文链接:https://www.f2er.com/js/45358.html

猜你在找的JavaScript相关文章