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


Posted in Javascript onOctober 08, 2016

使用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中获取元素标签中间的内容的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
Element PageHeader页头的使用方法
Jul 26 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
小程序实现密码输入框
Nov 16 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 #Javascript
JS获取html元素的标记名实现方法
Oct 08 #Javascript
js获取元素的标签名实现方法
Oct 08 #Javascript
什么是JavaScript中的结果值?
Oct 08 #Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 #Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 #Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 #Javascript
You might like
使用数据库保存session的方法
2006/10/09 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php给数组赋值的实例方法
2019/09/26 PHP
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
建筑专业自荐信
2013/10/18 职场文书
网络工程专业毕业生推荐信
2013/10/28 职场文书
淘宝活动策划方案
2014/02/06 职场文书
感恩寄语大全
2014/04/11 职场文书
初中班主任评语
2014/04/24 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
融资合作协议书范本
2014/10/17 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
五年级下册复习计划
2015/01/19 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript