Javascript 获取标签内容的方法

2020-12-27 23:59:55 阅读：217 来源： 互联网

标签：box 标签 Javascript innerHTML 获取 innerText var 内容

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>

标签：box,标签,Javascript,innerHTML,获取,innerText,var,内容
来源： https://blog.csdn.net/weixin_44023680/article/details/111828716

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Javascript 获取标签内容的方法

JS获取标签内容的方法

1.innerHTML

2.innerText

3.texContent