做为HTML元素的内容插入
# 做为HTML的元素内容
## 1. innerHTML属性
* 将包括html标记的文本,插入到指定的元素内部
* 所有浏览器都支持
-------------------------------------------
## 2. outerHTML
* 将元素自身,即调用者,用新的内容替换
* 只允许在元素`Element`上调用,不允许在文档`Document`上调用
-------------------------------------------
## 3. insertAdjacentHTML()
* 将任何的含有html标记的字符串插入到指定位置
* 以元素起始标签为标记,有4个插入点
* `beforebegin / afterbegin`: 起始标签的前后
* `beforeend / afterend`: 结束标签的前后
-------------------------------------------
## 4. 示例源码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>做为HTML的元素内容</title>
</head>
<body>
<div>
<p>html.cn</p>
</div>
<script>
var p = document.getElementsByTagName('p')[0];
// 1. innerHTML: 用新内容替换掉元素内的原内容
// p.innerHTML = '<strong>html中文网</strong>';
// 看上去还不错, 但是在追回内容,使用'+='运算时,因为又要序列化又要解析,效率极其低下
// p.innerHTML += '是一个<span style="color:red">公益专业</span>的前端学习平台';
// 2. outerHTML: 将元素自身,即调用者,用新的内容替换
p.outerHTML = '<h2>html.cn</h2>';
// 注: 只允许在元素上调用,不允许在文档上调用(也好理解,如果在文档上调用,也write就是一样了)
// 3. insertAdjacentHTML: 将任何的含有html标记的字符串插入到任意位置
var div = document.getElementsByTagName('div')[0];
var content = '<p style="color:red">中文网</p>';
// 插入到起始标签<div>的前后
// 位置标记: 位置(before前,after后) + 标记(begin起始标签)
div.insertAdjacentHTML("beforebegin", content);
div.insertAdjacentHTML("afterbegin", content);
// 位置标记: 位置(before前,after后) + 标记(begin起始标签)
div.insertAdjacentHTML("beforeend", content);
div.insertAdjacentHTML("afterend", content);
</script>
</body>
</html>
```
