innerHTML、innerText、outerHTML、outerText區別。

Harpsichord1207 發布于2019-08-01 16:26 / 528人閱讀

摘要：設置或獲取對象起始標簽和結束標簽之間的內容。使用上面的操作執行輸出執行輸出注意到區別了嗎，輸出中的內容時，標簽是不包含在內的。在設置時，執行此時頁面顯示的內容是，此時標簽名沒有被解析，當作字符原樣輸出。

1.innerHTML:設置或獲取對象起始標簽和結束標簽之間的內容。如：

hello world

segmentfault
dazhuaoyao

執行console.log(document.getElementById("div1").innerHTML);輸出：hello world
執行console.log(document.getElementById("div2").innerHTML);輸出：
segmentfault

dazhuaoyao

執行document.getElementById("div1").innerHTML=‘node’會設置div1中的內容為：node
執行document.getElementById("div1").innerHTML="

"+"node"+"

",此時頁面顯示的內容依舊是node,標簽名會自動解析，不會輸出。

2.innerText:設置或獲取位于對象起始和結束標簽內的文本。使用上面的div操作：
執行console.log(document.getElementById("div1").innerHTML);輸出：hello world
執行console.log(document.getElementById("div2").innerHTML);輸出：
segmentfault
dazhuaoyao
注意到區別了嗎，輸出div2中的內容時，標簽是不包含在內的。在設置innerText時，執行：
document.getElementById("div1").innerText="

"+"node"+"

";此時頁面顯示的內容是

node

，此時標簽名沒有被解析，當作字符原樣輸出。

3.outerHTML:設置或獲取對象及其內容的 HTML 形式。使用上面的div操作：
執行console.log(document.getElementById("div1").innerHTML);輸出：

hello world

執行console.log(document.getElementById("div2").innerHTML);輸出：

segmentfault

dazhuaoyao

與innerHTML不同的是，對象本身的標簽也包含進去了。在設置outerHTML時，和innerHTML一樣

4.outerText:設置或獲取對象的文本。使用上面的div操作：
執行console.log(document.getElementById("div1").outerText);輸出：hello world
執行console.log(document.getElementById("div2").innerHTML);輸出：
segmentfault
dazhuaoyao
不過，設置outerText的值時，可以解析標簽名。

GPU云服務器云服務器 innerhtml_innertext outerHTML outerText innerText

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50511.html

innerHTML、innerText、outerHTML、outerText區別。

摘要：設置或獲取對象起始標簽和結束標簽之間的內容。使用上面的操作執行輸出執行輸出注意到區別了嗎，輸出中的內容時，標簽是不包含在內的。在設置時，執行此時頁面顯示的內容是，此時標簽名沒有被解析，當作字符原樣輸出。 1.innerHTML:設置或獲取對象起始標簽和結束標簽之間的內容。如： hello world segmentfault dazhuaoyao 執行console.log(doc...

lbool 2019-08-20 14:49 評論0 收藏0
innerHTML&outerHTML&innerText&outerTex

摘要：有時候做項目會用到上述四個屬性來獲取文檔里的一些內容，但對他們的區別還是有些模糊，所以寫了幾個簡單的函數，通過打印在控制臺上的結果看看他們之間的區別。有時候做項目會用到上述四個DOM屬性來獲取HTML文檔里的一些內容，但對他們的區別還是有些模糊，所以寫了幾個簡單的函數，通過打印在控制臺上的結果看看他們之間的區別。代碼： outer inner one be...

draveness 2019-08-23 13:56 評論0 收藏0
DOM相關知識點

摘要：此文目的本文主要是整理相關的知識點，方便日后的查看和各位的查缺補漏。屬性和方法為元素節點，為屬性節點，為文本節點與返回為大寫標簽名，如。避免鏈式操作如果有返回值，則存在內存中。這個返回值包括了這個元素自己的和繼承自父元素的全部樣式。此文目的本文主要是整理DOM相關的知識點，方便日后的查看和各位的查缺補漏。所以重在整理，并不會展開。目前還在持續整理中，打算在16日左右完結。 Nod...

rose 2019-08-22 16:18 評論0 收藏0
DOM疑惑點整理（三）

摘要：好的，這些是眾所周知的。和兩者最大區別就是是否會改變調用它們的節點自身，類似上面與的其二中所描述。并未寫入規范，不建議使用，而且會導致調用它的節點自身消失。兩者可能因為瀏覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說一個幾乎眾所周知的，innerHTML和outerHTML中的內容都會被解析為DOM子樹，其二就是， let txt = doc...

高勝山 2019-08-22 16:34 評論0 收藏0
DOM疑惑點整理（三）

摘要：好的，這些是眾所周知的。和兩者最大區別就是是否會改變調用它們的節點自身，類似上面與的其二中所描述。并未寫入規范，不建議使用，而且會導致調用它的節點自身消失。兩者可能因為瀏覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說一個幾乎眾所周知的，innerHTML和outerHTML中的內容都會被解析為DOM子樹，其二就是， let txt = doc...

lucas 2019-08-02 10:15 評論0 收藏0