【EASYDOM系列教程】之 innerHTML 屬性

Element 對象提供了 innerHTML 屬性用於實現獲取或設置 HTML 頁面指定元素的 HTML 代碼。

獲取 HTML 代碼

innerHTML 屬性表示 HTML 頁面指定元素後代的 HTML 代碼，其語法結構以下:

var content = element.innerHTML;

在上述語法結構中，做爲返回值 content 表示描述元素後代的 HTML 語句。

須要說明的是，在上述語法結構中，調用 innerHTML 屬性的 element 表示元素節點。元素節點自己也是一個元素。

咱們能夠經過如下示例代碼，學習如何經過 innerHTML 屬性獲取指定元素的 HTML 語句:

var parent = document.getElementById('parent');
var content = parent.innerHTML;
console.log(content);

設置 HTML 代碼

innerHTML 屬性不只提供了獲取 HTML 頁面中指定元素的後代 HTML 語句，還提供了設置 HTML 頁面中指定元素的後代 HTML 語句。其語法結構以下:

element.innerHTML = markup;

在上述語法結構中，markup 表示設置描述元素後代的 HTML 語句。

咱們能夠經過如下示例代碼，學習如何經過 innerHTML 屬性設置指定元素的 HTML 語句:

var parent = document.getElementById('parent');
parent.innerHTML = '<button name="btn" class="button animate">A Button</button>';

不是 W3C 規範

儘管 innerHTML 屬性不屬於 W3C DOM 規範，可是它爲徹底替換元素內容提供了一個更加便捷的方式。

舉個例子，能夠經過以下代碼徹底刪除文檔內body的內容:

document.body.innerHTML = "";

值得注意的是: 由於 innerHTML 屬性沒有統一的標準，各瀏覽器廠商對它實現差異很大。

---

本教程免費開源，任何人均可以避免費學習、分享，甚至能夠進行修改。但須要註明做者及來源，而且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。