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. 一个新实验：使用gRPC-Web从浏览器调用.NET gRPC服务

    今天给大家翻译一篇由ASP.NET首席开发工程师James Newton-King前几天发表的一篇博客,文中带来了一个实验性的产品gRPC-Web.大家可以点击文末的讨论帖进行相关反馈.我会在文章末尾 ...

  2. JDBCTemplate初学简介

    JDBCTemplate JdbcTemplate是Spring的一部分,是对数据库的操作在jdbc的封装,处理了资源的建立和释放(不需要我们管理连接了),我们只需要提供SQL语句(不需要我们设置参数 ...

  3. HessianSharp如何部署到IIS7上？

    第一:添加映射 第二:选择经典

  4. Time-Frequency Networks For Audio Super-Resolution

    论文题目:2018_用于音频超分辨率的时频网络 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/12345950.html 摘要 音频超分辨率(即带 ...

  5. 面向对象之包装类与Object类

    一.包装类(Wrapper) 1.包装类出现原因 为了使8种基本数据类型的变量具有类的特征,引入包装类 2.类型间转化 ① 基本数据类型---->对应的包装类:自动装箱 包装类---->对 ...

  6. VFP获取 SQL Server 的数据表、触发器、存储过程、视图等脚本

    本文代码转载自红雨先生 *-----------------------------------------------* SqlServer 相关函数*----------------------- ...

  7. finalize的用法

    public class GC {          public static GC SAVE_HOOK = null;          public static void main(Strin ...

  8. Mysql 5.7 主从复制的多线程复制配置方式

    数据库复制的主要性能问题就是数据延时 为了优化复制性能,Mysql 5.6 引入了 “多线程复制” 这个新功能 但 5.6 中的每个线程只能处理一个数据库,所以如果只有一个数据库,或者绝大多数写操作都 ...

  9. CentOS7及Docker配置中文字符集问题

    说明 Linux系统默认使用英文字符集,不会安装中文字符集等其他字符. 查看当前字符集 $ 安装字符集 使用locale命令看看当前系统所使用的字符集 $ locale LANG=en_US.UTF- ...

  10. [Redis-Python]发布订阅通过Redis异步发送邮件

    接收订阅 #!/usr/bin/env pyhton # coding:utf-8 # @Time : 2020-02-16 21:36 # @Author : LeoShi # @Site : # ...