>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
>
> - github：https://github.com/Daotin/Web
> - 微信公众号：[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
> - 博客园：http://www.cnblogs.com/lvonve/
>
> 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
# 一、元素的创建
## 1、元素创建的三种方式
### 1.1、方式一
`document.write("标签代码及内容");`
示例：
```html
```
> 缺陷：如果是在页面加载完毕后，通过这种方式创建元素的话，页面上的除此创建元素之外的所有内容都会被清除。但是在页面加载的时候不会。
### 1.2、方式二
`标签.innerHTML = "标签代码及内容";`
示例：
```html
```
> 使用 innerHTML，在页面加载完毕后，不会清除页面的内容。
#### 案例：动态创建列表
```html
// 方式一
```
> 方式一的方式太过死板，li 标签的个数和内容都是固定的，如果增加 li 的个数需要修改源码。
```html
// 方式二
```
### 1.3、方式三
**第一步：创建元素，返回值为一个对象元素**
`document.creatElement("标签的名字");`
**第二步：将元素追加到父元素中**
`父元素.appendChild(创建的对象);`
示例：
```html
```
#### 案例：动态创建列表
```html
```
> 当在循环中添加事件的时候，建议不使用匿名函数，因为每个匿名函数都会占用一片内存空间，而使用函数调用的方式，不管循环多少次，都使用一份代码。
#### 案例：动态创建表格
```html
```
> `tableObj.border = "1";` 不能使用 `tableObj.style.border = "1px solid red";` 这样的话，只有table有边框，而 tr 没边框。所以 js 中，table 标签有自带的 border 属性可以设置边框，注意不需要 px。
### 2、DOM元素增删改查
`appendChild(ele)`：追加元素ele
`insertBefore(newEle, oldEle)`： 在oldEle元素前添加newEle
`removeChild(ele)`：删除元素ele（或者子元素自杀 `ele.remove();`）
`replaceChild(newEle, oldEle)`：将oldEle修改为newEle元素
```html
```
> `