Element 對象提供了 innerHTML 屬性用于實現獲取或設置 HTML 頁面指定元素的 HTML 代碼。
## 獲取 HTML 代碼
innerHTML 屬性表示 HTML 頁面指定元素后代的 HTML 代碼,其語法結構如下:
```javascript
var content = element.innerHTML;
```
在上述語法結構中,作為返回值 content 表示描述元素后代的 HTML 語句。
需要說明的是,在上述語法結構中,調用 innerHTML 屬性的 element 表示元素節點。元素節點本身也是一個元素。
我們可以通過以下示例代碼,學習如何通過 innerHTML 屬性獲取指定元素的 HTML 語句:
```javascript
var parent = document.getElementById('parent');
var content = parent.innerHTML;
console.log(content);
```
## 設置 HTML 代碼
innerHTML 屬性不僅提供了獲取 HTML 頁面中指定元素的后代 HTML 語句,還提供了設置 HTML 頁面中指定元素的后代 HTML 語句。其語法結構如下:
```javascript
element.innerHTML = markup;
```
在上述語法結構中,markup 表示設置描述元素后代的 HTML 語句。
我們可以通過以下示例代碼,學習如何通過 innerHTML 屬性設置指定元素的 HTML 語句:
```javascript
var parent = document.getElementById('parent');
parent.innerHTML = '<button name="btn" class="button animate">A Button</button>';
```
## 不是 W3C 規范
盡管 innerHTML 屬性不屬于 W3C DOM 規范,但是它為完全替換元素內容提供了一個更加便捷的方式。
舉個例子,可以通過如下代碼完全刪除文檔內body的內容:
```javascript
document.body.innerHTML = "";
```
> **值得注意的是:** 因為 innerHTML 屬性沒有統一的標準,各瀏覽器廠商對它實現差別很大。
- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器