原文地址: https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-value.html
innerHTML、innerText、textContent、outerHTML和value,傻傻分不清楚?何時該用哪一個?雖然咱們經常使用的老是innerHTML,但在一些特殊狀況下,正確的選擇可以事半功倍,因此是時候對這幾個小傢伙仔細分分清楚了。html
廢話很少說,先來看個例子:瀏覽器
<h1>innerHTML、innerText、textContent、outerHTML和value的區別</h1> <p id="content-wrapper">你是誰? <span>這是一個內嵌span測試</span> </p> <input id="name-input" type="text" placeholder="輸入你的名字" value="xk"> <button id="send-btn">發送</button> <script> let contentWrapper = document.getElementById("content-wrapper") let nameInput = document.getElementById("name-input") let sendBtn = document.getElementById("send-btn") console.log("文本p的innerHTML是:" + contentWrapper.innerHTML) console.log("文本p的innerText是:" + contentWrapper.innerText) console.log("文本p的textContent是:" + contentWrapper.textContent) console.log("文本p的outerHTML是:" + contentWrapper.outerHTML) console.log("文本p的value是:" + contentWrapper.value) console.log("input的innerHTML是:" + nameInput.innerHTML) console.log("input的innerText是:" + nameInput.innerText) console.log("input的textContent是:" + nameInput.textContent) console.log("input的outerHTML是:" + nameInput.outerHTML) console.log("input的value是:" + nameInput.value) console.log("按鈕button的innerHTML是:" + sendBtn.innerHTML) console.log("按鈕button的innerText是:" + sendBtn.innerText) console.log("按鈕button的textContent是:" + sendBtn.textContent) console.log("按鈕button的outerHTML是:" + sendBtn.outerHTML) console.log("按鈕button的value是:" + sendBtn.value) </script>
結果如圖:app
看完了其實仍是一臉懵逼狀。。有的值同樣,有的甚至連值都不見了,什麼鬼?好了總結一下:測試
innerHTML用來設置或獲取成對標籤之間的HTML內容,包括其中內嵌的子元素標籤。spa
innerText也用來設置或獲取成對標籤之間的HTML內容,但它只關注文本信息,會省略內嵌的標籤名。code
textContent也用來設置或獲取成對標籤之間的HTML內容,而且只關注文本信息。htm
outerHTML設置或獲取元素及其內容的HTML形式。blog
value是表單元素特有的屬性,一般input用的比較多,就是其中輸入的值,也很好區別。ip
咱們還要再把這三個難兄難弟挑出來,從瀏覽器兼容的角度來區別一下:rem
innerHTML是符合W3C標準的屬性,而innerText適用於IE瀏覽器,textContent適用於火狐瀏覽器。
這也就是爲何咱們總能看到innerHTML,總對它偏心有加,畢竟是W3C的親兒子嘛。
只不過到了今天,其他的瀏覽器也都實現了innerText和textContent,但要注意的是: