JS中innerText和innerHTML的区别

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chenguanghan123/article/details/88371500

innerText主要是设置文本的,甚至标签内容,是没有标签的效果的。

innerHTML主要的作用是在标签中设置新的heml标签内容,是有标签效果的

先来看看innerText的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JavaScript.js"></script>
</head>
<body>
    <input type="button" value="点击" id="btn" />
    <div id="dv">
    嘿嘿
    </div>
    <script>
        //添加按钮点击事件
        my$("btn").onclick = function () {
            my$("dv").innerText = "<p>这是一个p</p>";
            //my$("dv").innerHTML = "<p>这是一个p</p>";
        }
    </script>
</body>
</html>

 点击前

 点击后

 

使用innerHTML的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JavaScript.js"></script>
</head>
<body>
    <input type="button" value="点击" id="btn" />
    <div id="dv">
    嘿嘿
    </div>
    <script>
        //添加按钮点击事件
        my$("btn").onclick = function () {
            //my$("dv").innerText = "<p>这是一个p</p>";
            my$("dv").innerHTML = "<p>这是一个p</p>";
        }
    </script>
</body>

 使用效果

 

所以说想要设置标签内容,使用innerHtml,想要设置文本内容可以使用innerText或者textContent或者innerHTML,推荐使用HTML

用innerText获取标签中的文本内容的时候,如果文本内容里面还有标签,那么文本内容中的标签是获取不到的,而innerHtml可以获取到文本内容中的标签

猜你喜欢

转载自blog.csdn.net/chenguanghan123/article/details/88371500