JS中获取标签内容的方法对比 - 好文

    在我们平时的JS编程中，经常要获取标签的内容对其进行操作，有很多细节的东西容易被我们忽略。现在我根据自己平时使用的方法进行简单地总结一下。如有错误，敬请指正。

        HTML结构如下：

<!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>

方法一、innerHTML

        此方法可获取标签中的所有的内容，包括标签、空格、文本、换行等。

        JS代码和效果图如下：

<script>
    var box = document.getElementById('box');
//    获取标签的内容
    var box1 = box.innerHTML;
    console.log(box1);
</script>

innerHTML获取标签中内容

        如果想要清空标签的内容，innerHTML = ""；即可

        如果想要设置标签中的内容，innerHTML = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。

        JS代码和效果图如下：

<script>     var box = document.getElementById('box');     box.innerHTML =
'<h3>你们被我h3替换啦！！！</h3>';     console.log(box); </script>

innerHTML替换标签中的内容

方法二、innerText

        此方法获取标签中的文本，不会获取标签（或者说可以过滤掉所有的标签）。如果有多个空格或者是换行，解析为一个空格。

        JS代码和效果图如下：

<script>     var box = document.getElementById('box');     var box2 = box.
innerText;     console.log(box2); </script>

innerText获取标签内容

        如果想要清空标签的内容，innerText = ""；即可

        如果想要设置标签中的内容，innerText =
"填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。但是标签不会被解析，会直接以文本的形式打印在页面中。

        JS代码和效果图如下：

<script> var box = document.getElementById('box'); box.innerText =
'<p>这里有个p，来看一下</p>' </script>

innerText修改标签内容


由于innerText在2016年才被正式规定为DOM的属性，所以对于IE和谷歌之外的老版本浏览器存在很多的兼容性问题。2016年后的浏览器都支持此属性。之前的浏览器使用textContent来获取标签中的内容。但是textContent在过滤掉标签时，会保留标签结构。

        innerText兼容性问题处理JS代码：

<script>
//    处理innerText的浏览器兼容性问题
    function getInnerText(element) {
        if (typeof element.innerText === 'string') {
            return element.innerText;
        } else {
            return element.textContent;
        }
    }
</script>


以上是我对innerHTML和innerText获取标签内容进行简单的总结，大家可以根据它们不同的特征，在做项目的时候进行相对应的使用。若文中出现疏漏，还望指出。

热门工具换一换