节点操作之创建节点

在实际开发中，我们经常会遇到在用户使用过程中，我们需要动态创建一个文本框，也就是用户在点击某些按钮之后，我们要给这个页面添加一个新的节点。这种操作在节点操作里面叫做创建节点。那么创建节点有哪些方式呢？

创建元素节点

document.createElement('tagName');

通过创建变迁米昂指定的html元素，从而达到创建元素的目的。因为创建的元素在最开始的时候是不存在的，所以我们称为动态创建元素节点。

创建节点之后，我们还需要将所创建的这个节点添加到dom树里面去。

添加节点

我们创建节点之后，我们打开浏览器运行，很明显：我们创建的节点并没有出现，这是因为，浏览器显示的是dom树，而我们创建的节点并没有添加到dom树里面去，所以我们需要将创建的节点添加到dom树里面去。下面有两种方法将创建的节点添加到dom树里面去。

1. appendChild()
   fatherNode.appendChild(childNode);
   

这个方法将一个我们已经创建的节点添加到指定父节点的子节点列表的最后一个。也就是追加元素，有点类似于数组里面的push方法。就是将一个元素添加到数组的最后一个。

2. insertBefore()
   fatherNode.insertBefore(newNode, 指定元素);
   

是不是觉得第一个添加方法局限性很大，只能在最后面一个进行添加。那么这第二个方法就可以很好的解决这个问题。

这个方法是将一个新的节点添加到指定父节点的子节点列表的指定位置。也就是说，我们可以在指定的位置之前插入一个新的节点。

newMode是我们创建的节点（需要添加的节点），指定元素是我们要在哪个元素之前插入新的节点。

代码实现

下面的代码仅为代码片段：

// 创建一个div节点
    var div = document.createElement('div');
    // 设置div的内容
    div.innerHTML = '我是一个div';
    // 获取body
    var body = document.getElementsByTagName('body')[0];
    // 将div添加到body里面
    body.appendChild(div);
复制代码

这里我们先创建div节点，然后获取body节点，然后将div节点添加到body节点里面去。这里我们使用的是通过appendChild()方法将div节点添加到body节点里面去。也就是将创建的节点直接添加到body节点的子节点列表的最后一个。

// 创建一个p节点
    var p = document.createElement('p');
    // 设置p的内容
    p.innerHTML = '我是一个p';
    // 获取body
    var body = document.getElementsByTagName('body')[0];
    // 将p添加到body里面
    body.insertBefore(p, div[0]);
复制代码

第二段代码前面思路是一样的创建节点 --> 获取目标节点 --> 添加节点。这里我们使用的是insertBefore()方法将p节点添加到body节点里面去。也就是将创建的节点添加到body节点的子节点列表的指定位置。这里我们将p节点添加到body节点的子节点列表的第一个位置。