js中textContent、innerText和innerHTML的用法以及区别（JS中templateSign）难以置信

100 0 0

<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
document.getElementById(“dv”).textContent=”改变了”;
};
</script>
</body>

<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
var text=document.getElementById(“dv”).textContent;
console.log(text);
};
</script>
</body>

1.设置标签中的文本内容

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持如果这个属性在浏览器中不支持,那么这个属性的类型是undefined判断这个属性的类型是不是undefined,就知道浏览器是否支持

textContent、innerText的效果是一样的，所以这里我只用innerText举例

innerText的效果

<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
function my$(id) {
return document.getElementById(id);
};
</script>
<script>
my$(“btn”).onclick=function () {
my$(“dv”).innerText=”哈哈”;//设置文本
my$(“dv”).innerText=”<p>这是一个p</p>”;//设置html标签的代码
};
</script>
</body>

innerHTML的效果

<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
function my$(id) {
return document.getElementById(id);
};
</script>
<script>
my$(“btn”).onclick=function () {
my$(“dv”).innerHTML=”哈哈”;
my$(“dv”).innerHTML=”<p>这是一个p</p>”;//设置Html标签的
};
</script>
</body>

innerText的效果

<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>
<p>这是一个p</p>
</div>
<script>
document.getElementById(“btn”).onclick=function () {
//可以获取标签中的文本内容
console.log(document.getElementById(“dv”).innerText);
};
</script>
</body>

innerHTML的效果

如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的innerHTML是可以设置文本内容innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTMLinnerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.—获取不到标签的,文本可以获取innerHTML才是真正的获取标签中间的所有内容

本篇博客来自于传智播客视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途

您可能感兴趣的文章:js中innerText/textContent和innerHTML与target和currentTarget的区别

# 随心笔谈