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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
javascript实现随机抽奖功能
Dec 30 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
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php实现的双向队列类实例
2014/09/24 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
Python入门篇之正则表达式
2014/10/20 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python进行特征提取的示例代码
2020/10/15 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
实习自我鉴定
2013/12/15 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
销售会议开幕词
2015/01/28 职场文书
化验员岗位职责
2015/02/14 职场文书
医院病假条怎么写
2015/08/17 职场文书
护理培训心得体会
2016/01/22 职场文书