JS获取标签内容的方法

 测试代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="box">

     <p>这有个     第一个p</p>

 ​

     <p>这有个第二个p</p>

     <span>这是个

 ​

         span</span>

     <br>

 ​

     <a href="#">这有个a标签</a>

 </div>

 ​

 </body>

 </html>
1.innerHTML

此方法可获取标签中的所有的内容，包括标签、空格、文本、换行等。

想要清空标签的内容，innerHTML = ""；即可

如果想要设置标签中的内容，innerHTML = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。

JS代码和效果图如下：

 <script>

     var box = document.getElementById('box');

     // 获取标签的内容

     var box1 = box.innerHTML;

     var box2 = document.getElementById('box').innerHTML;

     console.log(box1);

 </script>

 <script>

     //替换标签内容

     var box = document.getElementById('box');

     box.innerHTML = '<h3>你们被我h3替换啦！！！</h3>';

     console.log(box);

 </script>

2.innerText

此方法获取标签(及其子标签)中的所有文本，不会获取标签（或者说可以过滤掉所有的标签）。如果有多个空格或者是换行，解析为一个空格。

如果想要清空标签的内容，innerText = ""；即可

如果想要设置标签中的内容，innerText = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。但是标签不会被解析，会直接以文本的形式打印在页面中。

 
<script>

     //获取标签机器子标签的所有文本内容

     var box = document.getElementById('box');

     var box2 = box.innerText;

     console.log(box2);

   </script>

 <script>

     //修改标签文本内容，内容中包含的标签不会被解析，会文本输出

     var box = document.getElementById('box');

     box.innerText = '<p>这里有个p，来看一下</p>'

 </script>

3.texContent

textContent来获取标签中的内容。但是textContent在过滤掉标签时，会保留标签结构。

innerText兼容性问题处理JS代码：

 <script>

 //    处理innerText的浏览器兼容性问题

     function getInnerText(element) {

         if (typeof element.innerText === 'string') {

             return element.innerText;

         } else {

             return element.textContent;

         }

     }

 </script>

JS获取标签内容的方法的更多相关文章

  1. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  2. （转）用JS获取地址栏参数的方法（超级简单）

    转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...

  3. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  4. js获取url参数的方法

    js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...

  5. js获取url传值的方法

    这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...

  6. appium获取Toast内容的方法

    做自动化测试的时候,可能需要根据弹出的Toast提示来做下一步判断.这里记录一下获取Toast内容的方法,同时巩固一下显示等待的方法之一WebDriverWait. from selenium.web ...

  7. js获取checkbox值的方法

    js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...

  8. JS清除选择内容的方法

    本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中 ...

  9. JS---DOM---设置和获取---标签内容和文本内容

    设置和获取---标签内容和文本内容   总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...

随机推荐

  1. PTA 7-9 集合相似度（STL之set初体验）

    7-9 集合相似度(25 分) 给定两个整数集合,它们的相似度定义为:N​c​​/N​t​​×100%.其中N​c​​是两个集合都有的不相等整数的个数,N​t​​是两个集合一共有的不相等整数的个数.你 ...

  2. 概念验证：在Kubernetes中部署ABAP

    对于将SAP ABAP应用服务器组件容器化和在Kubernetes中部署它们,我们在SPA LinuxLab中做了概念验证(PoC),本文将介绍一些我们的发现和经验.本文会也会指出这项工作的一些潜在的 ...

  3. Django 搭建

    1.安装python 2.pip 安装 Django  2.1.3 是版本号 命令:pip install Django==2.1.3 3.数据库驱动: mysql 数据库配置文档: 下载 whl 文 ...

  4. java sql语句 like%?%报错的问题

    在数据库中不会报错,但用java调用时确保错. SQL语句: SELECT pageId,`name`,text FROM Page WHERE `name` LIKE CONCAT('%',?,'% ...

  5. python os和sys模块使用

    python os和sys模块使用 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相 ...

  6. 1336 - Sigma Functio

    1336 - Sigma Function Sigma function is an interesting function in Number Theory. It is denoted by t ...

  7. 杭电-------2055An Easy Problem(C语言)

    #include<stdio.h> int main() { int m; int i; scanf("%d", &m); ]; int y; int z; ; ...

  8. transient关键字和serialVersionUID

    此文章很大部分转载于Java的架构师技术栈微信公众号,博主均测试通过加上自己理解写出 最近阅读java集合的源码,发现transient关键字,就了解了一下他的用法,transient关键字一般在实现 ...

  9. pikachu-跨站请求伪造（CSRF）

    一.CSRF漏洞概述 1.1 什么是CSRF漏洞 在CSRF的攻击场景中攻击者会伪造一个请求(整个请求一般是一个链接),然后七篇目标用户进行点击,用户一旦点击了这个请求,整个攻击也就完成了,所以CSR ...

  10. centos7安装postgresql和postgis

    1.安装步骤 -- 安装对应的rpm文件(其他系统的rpm包,请自行到https://yum.postgresql.org/下载)yum install -y https://download.pos ...