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

<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中获取元素标签中间的内容的实现方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • jQuery取得元素标签名称小结（附代码）

    代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

  • jquery中获得元素尺寸和坐标的方法整理

    一.获得坐标 1.offset() offset() 方法返回或设置匹配元素相对于文档的偏移(位置).(即视口坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 2.position() position() 方法返回匹配元素相对于父元素的位置(偏移).(相对于父元素的文档坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 3.offsetParent() offsetParent() 方法返回最

  • jQuery获取当前对象标签名称的方法

    获取当前对象标签名称 复制代码 代码如下: $(".classname")[0].tagName;

  • Jquery和Js获得元素标签名称的方法总结

    Jquery 和 Javascript 获得元素标签名称是通过tagName的属性获取的. 这里提供高版本 Jquery的获取元素标签名称的方法: 1.$( this ).get(0).tagName 2.$( this )[0].tagName 3.$( this ).prop("tagName") 4.$( this ).prop("nodeName") 以上就是小编为大家带来的Jquery和Js获得元素标签名称的方法总结全部内容了,希望大家多多支持我们~

  • JQuery中根据属性或属性值获得元素(6种情况获取方法)

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 复制代码 代码如下: $("p[id]").css("color","red"); 根据属性值获得元素 1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性

  • jquery用offset()方法获得元素的xy坐标

    获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;) var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left;

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

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

  • JavaScript中获取元素索引的函数

    这是我在写结构/表现/行为完全分离的选项卡(jQ版和原生JS版)一文时发现的问题. 今天一个朋友也问到我这个问题, 这个函数的确很实用. 和大家分享一下我的实现方法. 代码: 复制代码 代码如下: function index(current, obj){ for (var i = 0; i < obj.length; i++) { if (obj[i] == current) { return i; } } } 原理: 通过一个for循环遍历找出当前集合中与当前元素相等的元素,那么该元素的下标

  • Javascript中获取对象的原型对象的方法小结

    在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象. 复制代码 代码如下: <!-- lang: js --> function F(){}; var foo = new F(); alert(foo.__proto__ == F.prototype); 但是,__proto__属性在IE浏览器中一直到IE11才被支持. 那么在不支持__pro

  • JavaScript中获取HTML元素值的三种方法

    JavaScript中取得元素的方法有三种:分别是: 1.getElementById() 方法:通过id取得HTML元素. 2.getElementsByName()方法:通过name取得元素,是一个数组. 3.getElementsByTagName()方法:通过HTML标签取得元素,是一个数组. 如果要取得值可以使用value,如:var x=document.getElementById("id").value; 方法一:getElementById() 方法 可返回对拥有指定

  • javascript中获取class的简单实现

    js中没有获取class的办法,找了一些封装好的方法,这里整理一下 (1)先进行封装 //封装getClass function getClass(tagName,className) //获得标签名为tagName,类名className的元素 { if(document.getElementsByClassName) //支持这个函数 { return document.getElementsByClassName(className); } else { var tags=document

  • python的xpath获取div标签内html内容,实现innerhtml功能的方法

    python的xpath没有获取div标签内html内容的功能,也就是获取div或a标签中的innerhtml,写了个小程序实现一下: 源代码 [webadmin@centos7 csdnd4q] #162> vim /mywork/python/csdnd4q/z040.py #去掉最外层标签,保留其内的所有html标记和文本 def getinnerhtml(data): return data[data.find(">")+1:data.rfind("<

  • python链表类中获取元素实例方法

    1.append方法 向链表添加元素后.在链表中,不能通过索引来定位每个元素,只能在列表中定位.链表元素的.next方法需要被持续调用,以获得下一个元素,并最终获得最后一个元素.最后一个元素的.next属性中将指向新添加的元素. def append(self, new_element): current = self.head if self.head: while current.next: current = current.next current.next = new_element

  • JavaScript中省略元素对数组长度的影响

    JavaScript中省略元素对数组长度的影响

    在学习<JavaScript权威指南>第六版的第7.1节中通过数组直接量创建数组时,我们可以不给数组的某个元素赋值,它就会使undefined.虽然是undefined,但我们调用数组对象的length属性时undefined也会导致length加1.有如下所示的四种情况: var undef0 = [,,]; var undef1 = [1,,]; var undef2 = [,1,]; var undef3 = [,,1]; console.log(undef0.length); cons

  • jquery获取元素到屏幕四周可视距离的方法

    实例如下: $(window).height();//是文档窗口高度 $("div").offset().top//是标签距离顶部高度(没有到下面的距离,比如$("div").offset().down) $("div").offset().left//是标签距离右边高度(没有到下面的距离,比如$("div").offset().right) $(document).scrollTop();//是滚动条高度 $("d

  • ASP.NET实现MVC中获取当前URL、controller及action的方法

    本文实例讲述了ASP.NET实现MVC中获取当前URL.controller及action的方法.分享给大家供大家参考,具体如下: URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟目录名+页面名+参数: string url=Request.RawUrl; 或 string url=Request.Url.PathAndQuery; [3]获取 虚拟

随机推荐