//自定義函數 function my$(id) { return document.getElementById(id); } //點擊按鈕設置div中的文本內容 my$("btn").onclick = function () { //設置標簽中間的文本內容,應該使用textContent屬性 my$("dv").innerText = "啊,這是div"; /* my$("dv").textContent="this is div標簽"; */ //獲取標簽中間的文本內容 console.log(my$("dv").innerText); /* console.log(my$("dv").textContent); */ };
設置標簽中的文本內容,應該使用textContent屬性,谷歌,火狐支持,IE8不支持
設置標簽中的文本內容,應該使用innerText屬性,谷歌,火狐,IE8都支持
如果這個屬性在瀏覽器中不支持,那么這個屬性的類型是undefined
判斷這個屬性的類型 是不是undefined,就知道瀏覽器是否支持
//兼容代碼 //設置任意的標簽中間的任意文本內容 function setInnerText(element,text) { //判斷瀏覽器是否支持這個屬性 if(typeof element.textContent =="undefined"){//不支持 element.innerText=text; }else{//支持這個屬性 element.textContent=text; } } //獲取任意標簽中間的文本內容 function getInnerText(element) { if(typeof element.textContent=="undefined"){ return element.innerText; }else{ return element.textContent; } }
總結:
如果使用innerText主要是設置文本的,設置標簽內容,是沒有標簽的效果的
總結:innerHTML是可以設置文本內容
總結:innerHTML主要的作用是在標簽中設置新的html標簽內容,是有標簽效果的
總結:
想要設置標簽內容,使用innerHTML,支持設置HTML的標簽
想要設置文本內容,innerText或者textContent,或者innerHTML,推薦用innerHTML
獲取的時候:
innerText可以獲取標簽中間的文本內容,但是標簽中如果還有標簽,那么最里面的標簽的文本內容也能獲取.---獲取不到標簽的,文本可以獲取
innerHTML才是真正的獲取標簽中間的所有內容 ,如果想要(獲取)標簽及內容,使用innerHTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$永遠的24k純帥$</title> <style> div { width: 200px; height: 150px; border: 2px solid red; } </style> </head> <body> <input type="button" value="設置值" id="btn"/> <div id="dv">哦,太神奇了</div> <script src="common.js"> function my$(id) { return document.getElementById(id); } </script> <script> /* 設置標簽中的文本內容,應該使用textContent屬性,谷歌,火狐支持,IE8不支持 設置標簽中的文本內容,應該使用innerText屬性,谷歌,火狐,IE8都支持 如果這個屬性在瀏覽器中不支持,那么這個屬性的類型是undefined 判斷這個屬性的類型 是不是undefined,就知道瀏覽器是否支持 */ //兼容代碼 //設置任意的標簽中間的任意文本內容 function setInnerText(element,text) { //判斷瀏覽器是否支持這個屬性 if(typeof element.textContent =="undefined"){//不支持 element.innerText=text; }else{//支持這個屬性 element.textContent=text; } } //獲取任意標簽中間的文本內容 function getInnerText(element) { if(typeof element.textContent=="undefined"){ return element.innerText; }else{ return element.textContent; } } //測試 my$("btn").onclick=function () { console.log(getInnerText(my$("dv"))); /* setInnerText(my$("dv"),"哈哈,我又變帥了"); */ }; //自定義函數 function my$(id) { return document.getElementById(id); } //點擊按鈕設置div中的文本內容 my$("btn").onclick = function () { //設置標簽中間的文本內容,應該使用textContent屬性 my$("dv").innerText = "啊,這是div"; /* my$("dv").textContent="this is div標簽"; */ //獲取標簽中間的文本內容 console.log(my$("dv").innerText); /* console.log(my$("dv").textContent); */ }; </script> </body> </html>