脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 获取元素

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

 更新时间：2016年10月08日 17:55:28   投稿：jingxian  
下面小编就为大家带来一篇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中获取元素标签中间的内容的实现方法全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • BootStrap Progressbar 实现大文件上传的进度条的实例代码

    BootStrap Progressbar 实现大文件上传的进度条的实例代码

    这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • JS实现浏览器菜单命令

    JS实现浏览器菜单命令

    JS实现浏览器菜单命令...
    2006-09-09
  • JavaScript高级程序设计 阅读笔记（十五） 浏览器中的JavaScript

    JavaScript高级程序设计 阅读笔记（十五） 浏览器中的JavaScript

    Window对象对操作浏览器窗口非常有用，开发者可以移动或调整浏览器窗口的大小
    2012-08-08
  • js+css在交互上的应用

    js+css在交互上的应用

    关于css应用。以前一直认为css就是做布局样式，只能表现页面，跟交互是没关系的。事实上也基本不会往那边想。
    2010-07-07
  • JavaScript 中文转拼音实现代码 有些bug

    JavaScript 中文转拼音实现代码 有些bug

    在做项目时候遇到一个小小的显示客户部门名称（拼音）的业务，就是在部门名称下有相应的拼音，而在现有的数据库中没有相应字段，并且部门数量比较多，添加起来比较费时，就想能否在js中实现，在页面中处理。
    2010-03-03
  • 微信小程序提交form操作示例

    微信小程序提交form操作示例

    这篇文章主要介绍了微信小程序提交form操作,结合实例形式分析了微信小程序开发中使用form组件实现数据提交与数据处理相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • JS如何输出26个英文字符

    JS如何输出26个英文字符

    这篇文章主要介绍了JS如何输出26个英文字符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • js实现弹幕墙效果

    js实现弹幕墙效果

    这篇文章主要为大家详细介绍了js实现弹幕墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 简单了解JavaScript sort方法

    简单了解JavaScript sort方法

    这篇文章主要介绍了简单了解JavaScript sort方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • JS新包管理工具yarn和npm的对比与使用入门

    JS新包管理工具yarn和npm的对比与使用入门

    在2016年10月11日facebook 公开了新的javascript包管理工具 yarn, 用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)，本文将介绍yarn工具带来的优点和使用入门，以及对比npm解决了什么问题，带来哪些便利。有需要的朋友们下面来一起看看吧。
    2016-12-12

最新评论