18.innerHTML、outerHTML、innerText 、outerText、value

獲取:

①innerHTML :屬性設置或返回該標簽內的HTML。也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。
②outerHTML:屬性設置或返回該標簽及標簽內的HTML。也就是從對象的該標簽起始到終止位置的全部內容,包括Html標簽。
如果要輸出不含HTML標簽的內容,可以使用innerHTML取得包含HTML標簽的內容后,再用正則表達式去除HTML標簽,
③inneText:從起始位置到終止位置的內容,但它去除html標簽。(只能在IE和chrome下使用)
④outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本
⑤value:屬性可設置或返回密碼域的默認值。獲取文本框的值

html:
<div id='test'>您輸入的值是:<span id="aqi-display">尚無錄入</span></div>
js:
<script>
var test = e('#test')
console.log('innerHTML', test.innerHTML)
console.log('outerHTML', test.outerHTML)
console.log('innerText', test.innerText)
console.log('outerText', test.outerText)
console.log('value', test.value)
</script>
區別

設置:

備注:innerText 和outerText 在讀取得時候是一樣的,只是在設置的時候outerText 會連帶標簽一起替換成目標文本
同理 innerHTML, outerHTML. 只不過它們操作的不是text而是HTML.

原來
點擊change_innerText

點擊change_outerText
Paste_Image.png
Paste_Image.png

備注:參考 [趙曉盼]
[博客]

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,310評論 1 41
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,881評論 18 139
  • 0.B/S結構 瀏覽器服務器模式,web瀏覽器是客戶端最主要的應用軟件.將客戶端使用web進行統一,系統功能實現集...
    liusong007閱讀 1,082評論 0 1
  • 也不知什么時候,瑪麗蘇文興起,女主傾國傾城,才貌雙全,逢兇化吉,全天下都愛她,即便瑪麗蘇文不少人吐槽,但依舊頗有...
    蘇羽墨閱讀 249評論 0 0
  • 郭相麟 修身養性 靜氣襲人 成大事 當大任 慈悲談笑間……
    郭相麟閱讀 124評論 0 0