js中innerHTML与innerText的用法与区别
程序员文章站
2022-07-03 17:09:22
在js中，innerHTML属获取性的是元素对象内包含html代码的内容，innerText属性只获得元素对象内的文本内容。下面通过代码演示讲解js中innerHTML与innerText的用法与区别。首先创建一个html文件，html文件内，使用div创建一个模块，在div内，使用span标签创建一行测试的文字。......
在js中，innerHTML属性获取的是元素对象内包含html代码的内容，innerText属性只获得元素对象内的文本内容。下面通过代码演示讲解js中innerHTML与innerText的用法与区别。
首先创建一个html文件，html文件内，使用div创建一个模块，在div内，使用span标签创建一行测试的文字。
然后为div设置id属性myid，主要用于js中通过该id获得div对象。
在html文件内，使用button标签创建一个按钮，给button按钮绑定onclick点击事件，当按钮被点击时，执行myfun（）函数。然后在js标签中，创建myfun()函数，在函数内，使用getElementById（）方法通过id（myid）获得div对象。
在myfun()函数内，使用innerHTML属性获得div对象内的内容，并使用alert()将获得的内容输出。在浏览器打开html文件，点击按钮，由结果可知，innerHTML属性获得了包括span标签的文本内容。
运行代码，点击按钮，警示框输出内容如下：
由此可见，innerHTML属获取性的是元素对象内包含html代码的内容
将innerHTML改成innerText再次运行，结果如下
由此可见，innerText属性只获得元素对象内的文本内容
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerText与innerHTML的区别演示</title>
</head>
<body>
<div id="myid">
<span>好好学习，天天向上</span>
</div>
<button onClick="myfun()">点击测试输出内容</button>
<script>
function myfun(){
var obj=document.getElementById("myid");
var text=obj.innerText;
alert(text);
}
</script>
</body>
</html>注：参考度娘总结
本文地址：https://blog.csdn.net/qq_45587146/article/details/109379271
推荐阅读
-
Java 中的 equals,==与 hashCode 的区别与联系
-
浅谈python中np.array的shape( ,)与( ,1)的区别
-
java中extends与implements的区别浅谈
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
android中Intent传值与Bundle传值的区别详解
-
js中null与空字符串""的区别讲解
-
关于Mysql存储引擎中InnoDB与Myisam的主要区别介绍
-
Mysql中replace与replace into的用法讲解
-
Linux系统命令中exit与exit的区别
-
jquery中map函数与each函数的区别实例教程介绍