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. 免费网盘！无限申请5TB容量并且不限速的网盘！

    鸽了好久没有更新博客了哎…… 前言 这里我先说一下下,本人深受百度网盘坑害,自己上传的文件,16GB下载花了3天时间 最后下载失败? 所以找到的一个新的储存个人文件的方法. 这个网盘是onedrive ...

  2. 在.NET Core中使用MachineKey

    在.NET Core中使用MachineKey 姐妹篇:<ASP.NET Cookie是怎么生成的> 姐妹篇:<.NET Core验证ASP.NET密码> 在上篇文章中,我介绍 ...

  3. javascirpt获取随机数

    /* getran(min, max, n): 获取min与max之间的随机数 n: n保留浮点数数量 */ function getran(min, max, n){ return Number(( ...

  4. ELK-图示nginx中ip的地理位置

    一.环境准备: ELK stack 环境一套 geolite数据库文件 二.下载geolite数据库(logstash机器上解压,logstash需调用): geolite官网:https://dev ...

  5. window下建立vue.js项目

    安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...

  6. bootstrap组件---进度条

    <div class="progress"> <div class="progress-bar progress-bar-success" r ...

  7. 利用url地址获取你需要的参数，window.location系列

    这是我要获取url中一个code的参数值所以用了如下的方法GetQueryString(name) { let reg = new RegExp('(^|&)' + name + '=([^& ...

  8. Nginx 核心配置

    nginx的核心配置在conf/nginx.conf中. 全局配置块 user root; #运行worker进程的账户,user   用户   [组],默认以nobody账户运行 worker_pr ...

  9. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

  10. python 學習深淺拷貝、集合、、作用域、函數

    python 學習深淺拷貝.集合..作用域.函數 2020開年新冠肺炎流行大部分人員.工廠.單位無法復工生產,人員隔離每天外出都要戴口罩,在家隔離期間悶壞了感覺把半年的口糧都幹掉了,嚴重考察大家的資本 ...