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 对象
- 第六节 定时器