js中textContent、innerText和innerHTML的用法以及區(qū)別
一.textContent的用法
1.設(shè)置標(biāo)簽中的文本內(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.獲取標(biāo)簽中的文本內(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.設(shè)置標(biāo)簽中的文本內(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.獲取標(biāo)簽中的文本內(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.設(shè)置標(biāo)簽中的文本內(nèi)容
1.設(shè)置標(biāo)簽中的文本內(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.獲取標(biāo)簽中的文本內(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ū)別
- 設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用textContent屬性,谷歌,火狐支持,IE8不支持
- 設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用innerText屬性,谷歌,火狐,IE8都支持
- 如果這個屬性在瀏覽器中不支持,那么這個屬性的類型是undefined
- 判斷這個屬性的類型 是不是undefined,就知道瀏覽器是否支持
1.兼容代碼設(shè)置任意的標(biāo)簽中間的任意文本內(nèi)容
<script> function setInnerText(element, text) { //判斷瀏覽器是否支持這個屬性 if (typeof element.textContent == "undefined") {//不支持 element.innerText = text; } else {//支持這個屬性 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">這是一個div</div> <script> function my$(id) { return document.getElementById(id); }; </script> <script> my$("btn").onclick = function () { my$("dv").innerText = "哈哈";//設(shè)置文本 my$("dv").innerText = "<p>這是一個p</p>";//設(shè)置html標(biāo)簽的代碼 }; </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>";//設(shè)置Html標(biāo)簽的 }; </script> </body>
2.獲取標(biāo)簽中的文本內(nèi)容
innerText的效果
<body> <input type="button" value="按鈕" id="btn"> <div id="dv"> <p>這是一個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è)用途
相關(guān)文章
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName,需要的朋友可以參考一下2013-03-03JS+CSS實現(xiàn)精美的二級導(dǎo)航效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)精美的二級導(dǎo)航效果代碼,涉及JavaScript基于鼠標(biāo)事件動態(tài)變換元素樣式的技巧,非常簡單實用,需要的朋友可以參考下2015-09-09原生態(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡單實例
下面小編就為大家?guī)硪黄鷳B(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實例【測試可用】
這篇文章主要介紹了JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實現(xiàn)點擊圖片及點擊左右按鈕滑動切換的效果,涉及javascript針對鼠標(biāo)事件的響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08

JS實現(xiàn)Date日期格式的本地化的方法小結(jié)