javaScript中innerHTML,innerText,outerHTML,outerText的區別
開頭說下innerText和outerText只在chrome瀏覽器中有效
定義和用法
innerHTML 屬性設置或返回表格行的開始和結束標簽之間的 HTML，包括標簽。
來看代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> </head> <body> <div id="div1">這是一個標簽div</div> <span id="span1">這是一個標簽span</span> <div id="div2"> <span>div2裏面的span1</span> <span>div2裏面的span2</span></div> <script> var div1 = document.getElementById("div1").innerHTML; var span1 = document.getElementById("span1").innerHTML; var div2 = document.getElementById("div2").innerHTML; console.log(div1); console.log(span1); console.log(div2);</script> </body> </html>
我定義了三個標簽 ，然後用console打印出來
可以看出如果如果當前標簽只有文字，那innerHTML只會輸出文字
如果還有子標簽存在，則會將子標簽以及標簽內的文字一起輸出，這點一定要切記
這個時候你可以用replace方法來將標簽去除
只獲得文本內容
document.getElementById(‘div2‘).innerHTML.replace(/<.+?>/gim,‘‘));
如上，span標簽已經沒有了，只剩下裏面的文本內容
定義和用法
innerText 屬性設置或返回表格行的開始和結束標簽之間的 HTML內容，不包括Html標簽。 我們看代碼<body> <div id="div1">這是一個標簽div</div> <span id="span1">這是一個標簽span</span> <div id="div2"> <span>div2裏面的span1</span> <span>div2裏面的span2</span> <img src="" alt=""> </div> <script> var div1 = document.getElementById("div1").innerText; var span1 = document.getElementById("span1").innerText; var div2 = document.getElementById("div2").innerText; console.log(div1); console.log(span1); console.log(div2); </script> </body>
打印出來的結果
從結果可以看到不管是當前標簽還是子標簽都只輸出文本內容
定義和用法
outerHTML 設置或獲取對象及其內容的HTML形式，也就是標簽和文本內容全都顯示出來 我們看代碼<body> <div id="div1">這是一個標簽div</div> <span id="span1">這是一個標簽span</span> <div id="div2"> <span>div2裏面的span1</span> <span>div2裏面的span2</span> <img src="" alt=""> </div> <script> var div1 = document.getElementById("div1").outerHTML; var span1 = document.getElementById("span1").outerHTML; var div2 = document.getElementById("div2").outerHTML; console.log(div1); console.log(span1); console.log(div2); </script> </body>
我們看控制臺的打印結果
有意思吧
outerHTML是把當前標簽的全部內容包括標簽本身也全部取出來了
定義和用法
outerText 設置或獲取對象及其內容的HTML形式，也就是標簽和文本內容全都顯示出來我們來看代碼
<body> <div id="div1">這是一個標簽div</div> <span id="span1">這是一個標簽span</span> <div id="div2"> 你好世界 <span>div2裏面的span1</span> <span>div2裏面的span2</span> <img src="" alt=""> </div> <script> var div1 = document.getElementById("div1").outerText; var span1 = document.getElementById("span1").outerText; var div2 = document.getElementById("div2").outerText; console.log(div1); console.log(span1); console.log(div2); </script> </body>
看console打印的結果
很顯然，outerText是把當前標簽的內容給輸出了，如果有子標簽，也會把子標簽的內容也一起輸出了
那好，經過這麽一比較，我們就可以得出結論了
innerHTML 輸出當前標簽的文本內容，如果標簽內有子標簽，會連子標簽本身和子標簽內的文本內容一起輸出
innerText 只輸出當前標簽內的文本內容，如果標簽內有子標簽，那麽也只輸出子標簽內的文本內容
outerHTML 輸出當前標簽的本身和標簽內的文本內容，如果有子標簽，那麽子標簽本身和標簽內的文本內容也將一起輸出
outerText 只輸出當前標簽內的文本內容，如果標簽內有子標簽，那麽也只輸出子標簽內的文本內容
那麽outerText和innerText的區別到底在哪呢？同樣是只輸出文本內容，這兩個屬性在讀數據的時候是完全一樣的，可能在寫數據的時候不一樣？
下次寫jq的html(),text(),val()記錄時候更新一下
javaScript中innerHTML,innerText,outerHTML,outerText的區別