Javascript 获取标签内容的方法

最新推荐文章于 2024-01-03 16:54:53 发布

komomon‘s blog

最新推荐文章于 2024-01-03 16:54:53 发布

阅读量4.9k

点赞数 4

分类专栏： HTML/Javascript

本文链接：https://blog.csdn.net/weixin_44023680/article/details/111828716

版权

HTML/Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

komomon‘s blog

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Javascript 获取标签内容的方法

JS获取标签内容的方法测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <p>这有个第一个p</p> <p>这
复制链接

扫一扫