【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);

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>';

尽管 innerHTML 属性不属于 W3C DOM 规范，但是它为完全替换元素内容提供了一个更加便捷的方式。

举个例子，可以通过如下代码完全删除文档内body的内容:

document.body.innerHTML = "";

值得注意的是: 因为 innerHTML 属性没有统一的标准，各浏览器厂商对它实现差别很大。

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

图片描述