JS获取标签内容的方法

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>