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中使用inline函数的问题
Mar 08 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
Javascript之文件操作
2007/03/07 Javascript
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python实现的ini文件操作类分享
2014/11/20 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
西安大雁塔导游词
2015/02/10 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
入队仪式主持词
2015/07/04 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
JavaScript执行机制详细介绍
2021/12/06 Javascript