【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 国际许可协议进行许可。