js中textContent、innerText和innerHTML的用法以及區(qū)別
更新時間：2023年05月15日 23:40:21 作者：碼仙
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下
一.textContent的用法
1.設置標簽中的文本內(nèi)容
<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
document.getElementById("btn").onclick = function () {
document.getElementById("dv").textContent = "改變了";
};
</script>
</body>
2.獲取標簽中的文本內(nèi)容
<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>
二.innerText的用法
1.設置標簽中的文本內(nèi)容
<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
document.getElementById("btn").onclick = function () {
document.getElementById("dv").innerText = "改變了";
};
</script>
</body>
2.獲取標簽中的文本內(nèi)容
<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
document.getElementById("btn").onclick = function () {
var text = document.getElementById("dv").innerText;
console.log(text);
};
</script>
</body>
三.innerHTML的用法 1.設置標簽中的文本內(nèi)容
1.設置標簽中的文本內(nèi)容
<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
document.getElementById("btn").onclick = function () {
document.getElementById("dv").innerHTML = "改變了";
};
</script>
</body>
2.獲取標簽中的文本內(nèi)容
<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
document.getElementById("btn").onclick = function () {
var text = document.getElementById("dv").innerHTML;
console.log(text);
};
</script>
</body>
四.innerText和textContent的區(qū)別
- 設置標簽中的文本內(nèi)容,應該使用textContent屬性,谷歌,火狐支持,IE8不支持
- 設置標簽中的文本內(nèi)容,應該使用innerText屬性,谷歌,火狐,IE8都支持
- 如果這個屬性在瀏覽器中不支持,那么這個屬性的類型是undefined
- 判斷這個屬性的類型 是不是undefined,就知道瀏覽器是否支持
1.兼容代碼設置任意的標簽中間的任意文本內(nèi)容
<script>
function setInnerText(element, text) {
//判斷瀏覽器是否支持這個屬性
if (typeof element.textContent == "undefined") {//不支持
element.innerText = text;
} else {//支持這個屬性
element.textContent = text;
}
};
</script>2.兼容代碼獲取任意標簽中間的文本內(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.設置標簽中的文本內(nèi)容
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>
2.獲取標簽中的文本內(nèi)容
innerText的效果
<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">
<p>這是一個p</p>
</div>
<script>
document.getElementById("btn").onclick = function () {
//可以獲取標簽中的文本內(nèi)容
console.log(document.getElementById("dv").innerText);
};
</script>
</body>
innerHTML的效果
3.總結
- 如果使用innerText主要是設置文本的,設置標簽內(nèi)容,是沒有標簽的效果的
- innerHTML是可以設置文本內(nèi)容
- innerHTML主要的作用是在標簽中設置新的html標簽內(nèi)容,是有標簽效果的
- 想要設置標簽內(nèi)容,使用innerHTML,想要設置文本內(nèi)容,innerText或者textContent,或者innerHTML,推薦用innerHTML
- innerText可以獲取標簽中間的文本內(nèi)容,但是標簽中如果還有標簽,那么最里面的標簽的文本內(nèi)容也能獲取.---獲取不到標簽的,文本可以獲取
- innerHTML才是真正的獲取標簽中間的所有內(nèi)容
本篇博客來自于傳智播客視頻教程的總結以及筆記的整理，僅供學習交流，切勿用于商業(yè)用途
您可能感興趣的文章:
- innerhtml用法 innertext用法 以及innerHTML與innertext的區(qū)別
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- javascript innerText和innerHtml應用
- innerText innerHTML的用法以及注意事項 [推薦]
- 詳談innerHTML innerText的使用和區(qū)別
- innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
- innerText和innerHTML 一些問題分析
- JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
- innerHTML，outerHTML,innerTEXT三者之間的區(qū)別
- 前端innerHTML和innerText到底有啥區(qū)別及避坑指南(新人別再搞混了!)
相關文章
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)多條件篩選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
下面小編就為大家?guī)硪黄猨s控制一個按鈕是否可點擊(可使用)disabled的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
JavaScript實踐之使用Canvas開發(fā)一個可配置的大轉盤抽獎功能
公司項目搞優(yōu)惠活動,讓做一個轉盤抽獎的活動,這篇文章主要給大家介紹了關于JavaScript實踐之使用Canvas開發(fā)一個可配置的大轉盤抽獎功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
最近改了一個公司項目,新增加了一個獲取用戶手機號功能,里面用到了關于獲取用戶信息和用戶手機號的功能,下面這篇文章主要給大家介紹了關于微信小程序登錄方法之授權登陸及獲取微信用戶手機號的相關資料,需要的朋友可以參考下2022-07-07
javascript:FF/Chrome與IE動態(tài)加載元素的區(qū)別說明
今天在寫一段js時，發(fā)現(xiàn)IE與FF在動態(tài)加載Html元素時，有一些差別，一起過來看看下面的代碼吧2014-01-01
JavaScript實現(xiàn)通過滑塊改變網(wǎng)頁顏色
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)通過滑塊改變網(wǎng)頁顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
很少使用javascript的delete，最近因為一個小bug發(fā)現(xiàn)刪除引用類型對象的時候有一點不同2013-11-11
本文主要介紹了關于js中e.preventDefault()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了JS數(shù)據(jù)類型STRING使用實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了JS實現(xiàn)可控制的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03