文章詳情頁(yè)
js中textContent、innerText和innerHTML的用法以及區(qū)別
瀏覽：5日期：2022-06-10 15:02:23
一.textContent的用法
1.設(shè)置標(biāo)簽中的文本內(nèi)容
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> document.getElementById("btn").onclick = function () {document.getElementById("dv").textContent = "改變了"; };</script></body>
2.獲取標(biāo)簽中的文本內(nèi)容
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> document.getElementById("btn").onclick = function () {var text = document.getElementById("dv").textContent;console.log(text); };</script></body>
二.innerText的用法
1.設(shè)置標(biāo)簽中的文本內(nèi)容
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> document.getElementById("btn").onclick = function () {document.getElementById("dv").innerText = "改變了"; };</script></body>
2.獲取標(biāo)簽中的文本內(nèi)容
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> document.getElementById("btn").onclick = function () {var text = document.getElementById("dv").innerText;console.log(text); };</script></body>
三.innerHTML的用法 1.設(shè)置標(biāo)簽中的文本內(nèi)容
1.設(shè)置標(biāo)簽中的文本內(nèi)容
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> document.getElementById("btn").onclick = function () {document.getElementById("dv").innerHTML = "改變了"; };</script></body>
2.獲取標(biāo)簽中的文本內(nèi)容
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> document.getElementById("btn").onclick = function () {var text = document.getElementById("dv").innerHTML;console.log(text); };</script></body>
四.innerText和textContent的區(qū)別
- 設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用textContent屬性,谷歌,火狐支持,IE8不支持
- 設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用innerText屬性,谷歌,火狐,IE8都支持
- 如果這個(gè)屬性在瀏覽器中不支持,那么這個(gè)屬性的類型是undefined
- 判斷這個(gè)屬性的類型 是不是undefined,就知道瀏覽器是否支持
1.兼容代碼設(shè)置任意的標(biāo)簽中間的任意文本內(nèi)容
<script> function setInnerText(element, text) {//判斷瀏覽器是否支持這個(gè)屬性if (typeof element.textContent == "undefined") {//不支持 element.innerText = text;} else {//支持這個(gè)屬性 element.textContent = text;} };</script>2.兼容代碼獲取任意標(biāo)簽中間的文本內(nèi)容
<script> function getInnerText(element) {if (typeof element.textContent == "undefined") { return element.innerText;} else { return element.textContent;} };</script>五.textContent、innerText和innerHTML的區(qū)別
textContent、innerText的效果是一樣的，所以這里我只用innerText舉例
1.設(shè)置標(biāo)簽中的文本內(nèi)容
innerText的效果
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> function my$(id) {return document.getElementById(id); };</script><script> my$("btn").onclick = function () {my$("dv").innerText = "哈哈";//設(shè)置文本my$("dv").innerText = "<p>這是一個(gè)p</p>";//設(shè)置html標(biāo)簽的代碼 };</script></body>
innerHTML的效果
<body><input type="button" value="按鈕" id="btn"><div id="dv">這是一個(gè)div</div><script> function my$(id) {return document.getElementById(id); };</script><script> my$("btn").onclick = function () {my$("dv").innerHTML = "哈哈";my$("dv").innerHTML = "<p>這是一個(gè)p</p>";//設(shè)置Html標(biāo)簽的 };</script></body>
2.獲取標(biāo)簽中的文本內(nèi)容
innerText的效果
<body><input type="button" value="按鈕" id="btn"><div id="dv"> <p>這是一個(gè)p</p></div><script> document.getElementById("btn").onclick = function () {//可以獲取標(biāo)簽中的文本內(nèi)容console.log(document.getElementById("dv").innerText); };</script></body>
innerHTML的效果
3.總結(jié)
- 如果使用innerText主要是設(shè)置文本的,設(shè)置標(biāo)簽內(nèi)容,是沒有標(biāo)簽的效果的
- innerHTML是可以設(shè)置文本內(nèi)容
- innerHTML主要的作用是在標(biāo)簽中設(shè)置新的html標(biāo)簽內(nèi)容,是有標(biāo)簽效果的
- 想要設(shè)置標(biāo)簽內(nèi)容,使用innerHTML,想要設(shè)置文本內(nèi)容,innerText或者textContent,或者innerHTML,推薦用innerHTML
- innerText可以獲取標(biāo)簽中間的文本內(nèi)容,但是標(biāo)簽中如果還有標(biāo)簽,那么最里面的標(biāo)簽的文本內(nèi)容也能獲取.---獲取不到標(biāo)簽的,文本可以獲取
- innerHTML才是真正的獲取標(biāo)簽中間的所有內(nèi)容
本篇博客來自于傳智播客視頻教程的總結(jié)以及筆記的整理，僅供學(xué)習(xí)交流，切勿用于商業(yè)用途
標(biāo)簽：
JavaScript
排行榜
網(wǎng)公網(wǎng)安備