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

时间: 2016-10-06

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获取当前对象标签名称的方法

获取当前对象标签名称 复制代码 代码如下: $(".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用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;

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

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

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

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

jQuery中DOM树操作之使用反向插入方法实例分析

本文实例讲述了jQuery中DOM树操作之使用反向插入方法.分享给大家供大家参考.具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置.通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效.可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容.此时,利 用反向插入方法,可以帮我们解决问题. 像.insertBefore()和.appendTo()这样的插人方法,一般

jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

jQuery实现获取元素索引值index的方法

本文实例讲述了jQuery实现获取元素索引值index的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

jQuery获取父元素及父节点的方法小结

本文实例总结了jQuery获取父元素及父节点的方法.分享给大家供大家参考,具体如下: jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子, <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> &

JQuery中DOM实现事件移除的方法

本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法

jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined.   注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: 复制代码 代码如下: <!DOCTYPE html>

jquery中ajax使用error调试错误的方法

本文实例讲述了jquery中ajax使用error调试错误的方法.分享给大家供大家参考.具体分析如下: JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery中ajax的常用用法类似于: $(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.a