---
title: 07-DOM操作练习：innerHTML的方式创建元素
publish: true
---
## 动态创建DOM元素的三种方式
- `document.write();` 不常用，因为容易覆盖原来的页面。
- `innerHTML = ();` 用的比较多。绑定属性和内容比较方便。(节点套节点)
- `document.createElement();` 用得也比较多，指定数量的时候一般用它。
**1、方式一：**
```javascript
document.write();
```
这种方式的好处是：比较随意，想创建就创建，可以直接在`write`里写属性都行。但是会把原来的标签给覆盖掉。所以不建议。
举例：
```html
Title
```
效果如下：
**方式二：**innerHTML
举例如下：
```html
Title
```
注意，上方代码中，是用是用符号`+=`，不是`=`，前者是在原来的基础之上增加，后者是替换。
效果如下：
**3、方式三：**利用DOM的api创建
利用DOM的api创建节点，有很多种：
比如：
- createElement()
- appendChild()
- removeChild()
- insertBefore()
- replaceChild()
这个我们在上一篇文章的`DOM节点的操作`这一段中已经讲到了。
```html
```
## innerHTML举例：在线用户的获取
现在要做下面这样一个页面：
上图的意思是，每次刷新页面，都从服务器获取最新的在线人数的名单（我们先用本地的数组来模拟服务器上的数据）。
它的结构是：div > ul > li。每一个li就是一个头像。
如果在本地直接添加几个头像的话，代码是：
```html
//往ul中添加li元素以及li元素中的内容
ul.innerHTML += ''+
'
'+
'千古壹号
'+
'';
ul.innerHTML += ''+
''+
'千古壹号
'+
'';
ul.innerHTML += ''+
''+
'千古壹号
'+
'';
```
上方代码有两点比较重要：
- 我们是通过`ul.innerHTML += 元素节点`的方式来不停地往ul里面加内容，比`createElement`的方式要方便。
- 元素的内容本身有双引号`"`，所以我们要用单引号`'`进行字符串的连接。
但是，当我们从服务器获取在线用户的时候，头像和用户的昵称是动态变化的，所以每个字符串要用变量进行表示：
```html
ul.innerHTML += ''+
'!['+users[i].name+']('+users[i].icon+')
'+
''+users[i].name+'
'+
'';
```
这里我们暂时用本地的数组来代表服务器的数据，最终的完整版代码如下：
```html
```
工程文件：[2018-02-01-获取在线用户列表demo.rar](https://github.com/qianguyihao/web-resource/blob/main/project/2018-02-01-%E8%8E%B7%E5%8F%96%E5%9C%A8%E7%BA%BF%E7%94%A8%E6%88%B7%E5%88%97%E8%A1%A8demo.rar)
## innerHTML举例2：模拟百度搜索的下方提示
要求实现的效果如下：
在这之前，我们先实现这样一个例子：**判断字符串以某个字符串为开头**。
**判断字符串是否以某个字符串为开头：**
```javascript
var str = "smyhvae";
//判断str是否以sm为开头？（给定字符串，然后他的索引值为0）
var num = str.indexOf("sm");
//只有返回值为0，那么字符串才是以参数为开头
//如果在任何位置都查询不到参数，则返回值为-1；
```
代码解释：我们可以通过`indexOf("参数")`来实现。如果返回的索引值为0，说明字符串就是以这个参数开头的。
为了实现上方gif图的搜索功能，完整版代码如下：
```html
```
## 动态操作表格
方式1：
```
createElement()
```
方式2：
- rows (只读，table和textarea能用)
- insertRow() (只有table能调用)
- deleteRow() (只有table能调用)
- cells (只读，table和textarea能用)
- insertCell() (只有tr能调用)
- deleteCell() (只有tr能调用)
PS：括号里可以带index。用的不多。