innerHTML和innerText的用法以及不同点
程序员文章站
2022-06-23 10:37:47
innerHTML和innerText的区别两者的主要区别在于用法不同；innerHTML可以将获取的元素作为HTML元素进行解析或修改，innerText可以将获取的元素作为纯文本进行解析或修改。innerHTML和innerText的具体用法：
innerHTML和innerText的区别
两者的主要区别在于用法不同；
innerHTML可以将获取的元素作为HTML元素进行解析或修改，
innerText可以将获取的元素作为纯文本进行解析或修改。
innerHTML和innerText的具体用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="asmo-708">
<title></title>
</head>
<body>
<div id="kuai">
<p>这是被div和p包裹的文本</p>
</div>
<input type="button" value="innerHTML" onclick="HTML()" />
<input type="button" value="innerText" onclick="Text()" />
</body>
<script type="text/javascript">
function HTML() {
var kuai = document.getElementById("kuai")//获取div标签
console.log(kuai.innerHTML)//控制台输出div里的HTML内容
}
function Text() {
var kuai = document.getElementById("kuai")//获取div标签
console.log(kuai.innerText)//控制台输出div里的文本内容
}
</script>
</html>
这个是网页显示效果：
分别点击按钮后控制台显示：
进行对比后发现，innerHTML会将标签和文本同时进行解析，而innerText只会将文本进行解析。
本文地址：https://blog.csdn.net/qq_43445758/article/details/111104278
推荐阅读
-
C#中StringBuilder用法以及和String的区别分析
-
js中innerText/textContent和innerHTML与target和currentTarget的区别
-
C#中StringBuilder用法以及和String的区别分析
-
详解安装mitmproxy以及遇到的坑和简单用法
-
append和appendTo的区别以及appendChild用法
-
js中innerText/textContent和innerHTML与target和currentTarget的区别
-
详解安装mitmproxy以及遇到的坑和简单用法
-
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
-
详谈innerHTML innerText的使用和区别
-
JavaScript中的split()、substr()、substring()以及slice()和splice()的用法区别