【JS】原生JS的DOM操作之插入元素

男娘i 2022-05-28 23:07 430阅读 0赞

> 插入元素主要是：在已有元素前插入元素和在已有元素后插入元素

## 在已有元素前插入元素 ##

DOM提供了insertBefore()方法，这个方法将一个新元素插入到一个现有的元素中  
需要满足三个条件：

1.  新元素：你想插入的元素 （newElement）
2.  目标元素：你想把这个新元素插入到那个元素（targetElement）之前
3.  父元素：目标元素的父元素（parentElement）

> parentElement.insertBefore( newElement , targetElement );

//这里parentElement = targetElement.parentNode
    var newEle = getElementById('#newEle'); //新添加的元素
    var oldEle= getElementById('#oldEle'); //现有的元素
    oldEle.parentNode.insertBefore( newEle,oldEle );
    //将newEle插入到oldEle之前

## 在已有元素后插入元素 ##

DOM并没有提供在已有元素之后插入元素，因此我们需要写一个insertAfter()；  
需要用到的DOM属性：

*  parentNode 属性
 *  lastChild 属性
 *  appendChild() 方法
 *  insertBefore() 方法
 *  nextSibling() 属性

首先，我们需要两个参数：被插入的新元素，已有的元素，

1.  新元素：你想插入的元素 （newElement）
2.  目标元素：你想把这个新元素插入到那个元素（targetElement）之前

其次，把目标元素的parentNode属性值保存到parent

再次是，检测目标元素是不是parent最后一个子元素，就是比较parent元素的lastChild属性值是否等于目标元素

if( parent.lastChild == targetElemnt )

> 如果相等，就用appendChild()方法追加到parent元素上，这样新元素就恰好插入到目标元素之后  
> 如果不相等，就把新元素插入到目标元素和目标元素的下一个兄弟节点之间，目标元素的下一个兄弟节点是nextSibling，用insertBefore()方法插入到目标元素下一个兄弟元素之前

parent.insertBefore( newElement, targetElement.nextSiblings )

完整代码：