設定和獲取---標簽內容和文本內容
總結---設定：
使用innerText主要是設定文本的, 設定標簽內容, 是沒有標簽的效果的 innerHTML是可以設定文本內容 innerHTML主要的作用是在標簽中設定新的html標簽內容, 是有標簽效果的- 想要設定標簽內容, 使用innerHTML
- 想要設定文本內容, innerText或者textContent, 或者innerHTML, 推薦用innerHTML
總結---獲取：
- innerText可以獲取標簽中間的文本內容, 但是標簽中如果還有標簽, 那么最里面的標簽的文本內容也能獲取.---獲取不到標簽, 但文本可以獲取
- innerHTML才是真正的獲取標簽中間的所有內容
1. 關于innerText和textContent
設定和獲取文本內容
//點擊按鈕設定div中的文本內容 my$("btn").onclick = function () { //設定標簽中間的文本內容, 應該使用textContent屬性 my$("dv").textContent = "this is div標簽"; // my$("dv").innerText = "啊,這是div"; //獲取標簽中間的文本內容 console.log(my$("dv").textContent); // console.log(my$("dv").innerText); };
- 設定標簽中的文本內容, 應該使用textContent屬性, 谷歌, 火狐支持, IE8不支持
- 設定標簽中的文本內容, 應該使用innerText屬性, 谷歌, 火狐, IE8都支持
測驗兼容的代碼如下：
- 如果這個屬性在瀏覽器中不支持, 那么這個屬性的型別是undefined
- 判斷這個屬性的型別，是不是undefined, 就知道瀏覽器是否支持
設定任意的標簽中間的任意文本內容
//設定任意的標簽中間的任意文本內容 function setInnerText(element, text) { //判斷瀏覽器是否支持這個屬性 if (typeof element.textContent == "undefined") {//不支持 element.innerText = text; } else {//支持這個屬性 element.textContent = text; } }View Code
獲取任意標簽中間的文本內容
function getInnerText(element) { if (typeof element.textContent == "undefined") { return element.innerText; } else { return element.textContent; } }View Code
測驗
my$("btn").onclick = function () {
//console.log(getInnerText(my$("dv")));
setInnerText(my$("dv"), "哈哈,我又變帥了");
};
View Code
2. 關于innerText和innerHTML
如果使用innerText主要是設定文本的,設定標簽內容,是沒有標簽的效果的 innerHTML是可以設定文本內容 innerHTML主要的作用是在標簽中設定新的html標簽內容,是有標簽效果的設定：
my$("btn").onclick=function () {
//my$("dv").innerText="哈哈";//設定文本
//my$("dv").innerText="<p>這是一個p</p>";//設定html標簽的代碼
//my$("dv").innerHTML="哈哈";
//my$("dv").innerHTML="<p>這是一個p</p>";//設定Html標簽的
};
獲取的時候：
innerText可以獲取標簽中間的文本內容,但是標簽中如果還有標簽,那么最里面的標簽的文本內容也能獲取.---獲取不到標簽的,文本可以獲取 innerHTML才是真正的獲取標簽中間的所有內容//獲取 my$("btn2").onclick=function () { //可以獲取標簽中的文本內容 //console.log(my$("dv").innerText); console.log(my$("dv").innerHTML); };
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165625.html
標籤：JavaScript
下一篇：手寫Promise A+ 規范