版权声明:本文为博主原创文章,未经博主允许不得转载。 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可以获取到文本内容中的标签