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

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

文章摘要

这篇文章主要介绍了HTML元素中`textContent`、`innerText`和`innerHTML`三个属性的区别及其使用方法。文章通过多个代码示例展示了如何利用这些属性来设置和获取元素的文本内容或HTML内容。 1. **textContent**：用于获取或设置元素的文本内容，主要针对文本节点，不包含嵌套的HTML标签。支持度较好的浏览器包括Chrome、Firefox、Google等。 2. **innerText**：类似于`textContent`，但可以获取或设置包含嵌套HTML标签的内容。IE8不支持`innerText`，其余浏览器支持。 3. **innerHTML**：用于获取或设置元素的全部内容，包括嵌套的HTML标签。可以通过`innerHTML`设置新的HTML内容，但无法直接修改现有标签的内容。文章还特别提醒，如果需要判断某个属性是否支持，可以通过检查`typeof`属性来确定支持情况。例如：```javascriptif (typeof element.textContent === "undefined") { // 不支持textContent element.innerText = "内容";} else { element.textContent = "内容";}``` 此外，文章还对比了`innerText`和`innerHTML`的作用，指出两者在获取内容时的区别。如果目标是设置标签内容（不涉及嵌入标签），建议使用`innerText`；如果需要设置包含嵌套标签的内容，则使用`innerHTML`。文章最后提到，`innerHTML`可以获取标签中的所有内容，包括嵌套标签的内容，而`innerText`仅获取文本内容。

<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的区别