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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
js实现倒计时关键代码
May 05 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
Vue多系统切换实现方案
Jun 05 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python3的pip路径在哪
2020/06/23 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
工程总经理工作职责
2013/12/09 职场文书
安全生产活动月方案
2014/03/09 职场文书
新年寄语大全
2014/04/12 职场文书
实习生工作证明范本
2014/09/14 职场文书
世界文化遗产导游词
2015/02/13 职场文书
岗位职责范本大全
2015/02/26 职场文书
个人工作决心书
2015/09/22 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
Go语言怎么使用变长参数函数
2022/07/15 Golang
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript