DOM节点的外部插入

DOM节点的插入是一个比较实用的方法，实际的运用中可以在不跨越 “规矩”的情况下随意插入数据，今天我就为大家讲一下外部插入。
我所了解到的外部插入的方法有四种：after()，insertAfter()，before()，insertBefore()。

我将通过上面的例子来对这四种外部插入节点的方法进行讲解（注：代码借鉴于老师）。分别给四个方法设置一个button按钮（以方法名为按钮命名），其次在内容区（content）内设置一个div元素。
after()方法是在所指定的元素外增加一个同级的元素，如果你想用这个方法向你想增加元素的内容区（content）增加一个元素，那么所选择的元素就要是在内容区里面一个同级元素。
使用after()方法，给事先指定的button按钮设置点击事件。
如上所示，给对应after()方法的按钮设置点击事件，将after()插入节点的方法写在点击事件内，执行方法来进行测试。当我点击按钮(btnAfter)时，内容区（content）内增加了一个元素，同时进行多次点击，此方法能无限增加元素。

与它所对应的方法insertAfter()以同样的方式进行测试，实验结果相同，唯一的不同是在代码书写格式上有所差异。书写顺序一个向指定元素外插入同级元素，一个将元素插入到指定的元素外。

两种方法实现效果都是在指定元素外插入元素，指定的元素永远在插入的元素之上，当内部含有另一个元素靠在指定元素下方，那么增加的元素会将哪一个元素往下挤，这样不会影响到整个的布局。
内部插入节点的方法能在内部的底部插入，还能在内部的顶部插入，外部插入同样的也有对应在指定元素外的上面插入元素。before()、insertBefore()方法也是在外部插入节点的方法，只不过插入的元素位置不一样。与上同理，给方法对应按钮设置点击事件调用插入方法进行测试。
这两种方法也是一组对应的方法，实现效果相同只是书写格式颠倒，插入的元素与之前插入方法有一点不同，前两种方法插入的元素是在指定元素下方从下到上的方式排列，而这两种是在指定元素上方从上到下的方式排列，如果同样的含有另外同级元素时插入的元素会把这个元素往上挤，不会影响到整个的布局。

外部插入节点也是一个很实用的方法。在实际使用中，不仅仅是内部插入小模块，在同级增加大模块也是很重要的，例如列表分类。不可能是你需要的列表都在的，你也要自己去创建自己新的分组，将内部和外部交叉使用，实现的效果将会复杂多变。