複製鏈接
請複製以下鏈接發送給好友

outerHTML

鎖定
outerHTML,中文意為圖例分析,用於獲取元素內的html內容和文本。
中文名
圖例分析
外文名
outerHTML
注意事項
注意瀏覽器兼容性
用    途
獲取元素內的html內容和文本
所屬學科
計算機

目錄

outerHTML簡介

圖1 圖1
圖例分析outerHTML的用法——與innerHTML不同,outerHTML包括整個標籤,而不僅限於標籤內部的內容。對於一個id為"testdiv"的div來説,outerHTML、innerHTML以及innerText三者的區別可以通過圖1展示出來。
outerHTML可以用來更改或獲取元素內所有的html和文本內容,包含引用該方法元素自身的標籤.
innerHTML是用來獲取元素內的html內容和文本.
innerText只獲取元素內的文本內容,html標籤將被忽略.
以上三者方法類似大家不要混淆.
注意outerHTML、innerText不是W3C標準,使用時請注意瀏覽器兼容性

outerHTML示例代碼

(可直接複製後轉存執行):
Demo
</p><p data-id="go0542ehm2">//.innerHTML</p><p data-id="go0542ehnm">function innerHTMLDemo()</p><p data-id="go0542wu7x">{</p><p data-id="go05424sfm">test_id1.innerHTML="<i><u>設置或獲取位於對象起始和結束標籤內的HTML.</u></i>";</p><p data-id="go0542wu9j">}</p><p data-id="go0542ehs4">//.innerText</p><p data-id="go0542ehto">function innerTextDemo()</p><p data-id="go0543cngr">{</p><p data-id="go0542ehwu">test_id2.innerText="<i><u>設置或獲取位於對象起始和結束標籤內的文本.</u></i>";</p><p data-id="go0543cnjb">}</p><p data-id="go0542ehzr">//.outerHTML</p><p data-id="go0542ei1c">function outerHTMLDemo()</p><p data-id="go0543cnm5">{</p><p data-id="go0542ei4h">test_id3.outerHTML="<i><u>設置或獲取對象及其內容的 HTML 形式.</u></i>";</p><p data-id="go0543cnou">}</p><p data-id="go0542ei7m">//.outerText</p><p data-id="go0542ei96">function outerTextDemo()</p><p data-id="go0543cnrn">{</p><p data-id="go0542eicc">test_id4.outerText="<i><u>設置(包括標籤)或獲取(不包括標籤)對象的文本.</u></i>";</p><p data-id="go0543cnuk">}</p><p data-id="go0542eifh">
  • innerHTML效果.
  • innerText效果.
  • outerHTML效果.
  • outerText效果.