js中textContent、innerText和innerHTML的用法以及區(qū)別
更新時(shí)間：2023年05月15日 23:40:21 作者：碼仙
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下
一.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è)用途
您可能感興趣的文章:
- innerhtml用法 innertext用法 以及innerHTML與innertext的區(qū)別
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- javascript innerText和innerHtml應(yīng)用
- innerText innerHTML的用法以及注意事項(xiàng) [推薦]
- 詳談innerHTML innerText的使用和區(qū)別
- innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
- innerText和innerHTML 一些問題分析
- JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
- innerHTML，outerHTML,innerTEXT三者之間的區(qū)別
- 前端innerHTML和innerText到底有啥區(qū)別及避坑指南(新人別再搞混了!)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)多條件篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
js控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例
下面小編就為大家?guī)硪黄猨s控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
JavaScript實(shí)踐之使用Canvas開發(fā)一個(gè)可配置的大轉(zhuǎn)盤抽獎(jiǎng)功能
公司項(xiàng)目搞優(yōu)惠活動(dòng),讓做一個(gè)轉(zhuǎn)盤抽獎(jiǎng)的活動(dòng),這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)踐之使用Canvas開發(fā)一個(gè)可配置的大轉(zhuǎn)盤抽獎(jiǎng)功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)
最近改了一個(gè)公司項(xiàng)目,新增加了一個(gè)獲取用戶手機(jī)號(hào)功能,里面用到了關(guān)于獲取用戶信息和用戶手機(jī)號(hào)的功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)的相關(guān)資料,需要的朋友可以參考下2022-07-07
javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說明
今天在寫一段js時(shí)，發(fā)現(xiàn)IE與FF在動(dòng)態(tài)加載Html元素時(shí)，有一些差別，一起過來看看下面的代碼吧2014-01-01
JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁顏色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
很少使用javascript的delete，最近因?yàn)橐粋€(gè)小bug發(fā)現(xiàn)刪除引用類型對(duì)象的時(shí)候有一點(diǎn)不同2013-11-11
關(guān)于js中e.preventDefault()的具體使用
本文主要介紹了關(guān)于js中e.preventDefault()的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JS數(shù)據(jù)類型STRING使用實(shí)例解析
這篇文章主要介紹了JS數(shù)據(jù)類型STRING使用實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可控制的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03