js中innerHTML与innerText的用法与区别
程序员文章站
2022-04-12 08:01:57
在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
推荐阅读
-
JSP中动态include与静态include的区别介绍
-
Java中的匿名对象定义与用法实例分析
-
SQLServer 中.与::的区别
-
jsp中页面之间的跳转forward与sendRedirect的区别
-
js中innerText/textContent和innerHTML与target和currentTarget的区别
-
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
-
jQuery中bind,live,delegate与one方法的用法及区别解析
-
vue.js 1.x与2.0中js实时监听input值的变化
-
js中的触发事件对象event.srcElement与event.target详解
-
Jquery中children与find之间的区别详细解析