JavaScript在已有的元素后插入一个新元素

最新推荐文章于 2022-09-05 11:41:25 发布

weixin_33868027

最新推荐文章于 2022-09-05 11:41:25 发布

阅读量2.2k

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/l3ve/blog/160283

版权

为什么80%的码农都做不了架构师？>>>

在介绍主要内容之前，我们得先了解下DOM提供了一个insertBefore（）方法，如方法名，可以把一个新元素插入到一个现有的元素的前面

parentElement.insertBefore(newElement, targetElement);

newElement: 要插入的元素

targetElement: 插入到哪个元素

parentElement: targetElement的父亲元素

其中parentElement比较特殊，你并不需要理会它，既然他是 targetElement的父亲元素，那么

targetElement.parentNode

就可以了。（PS:parentNode自己可以查下作用）

接下来到了我们的主餐时间了~

很遗憾的是javascript有 insertBefore方法，却没有提供insertAfter方法（具体来说应该是DOM没有提供）。所以我们得自己动手丰衣足食，以下借鉴《JavaScript DOM编程艺术》里的方法。

一，首先，无论是插入到前面还是后面，我们都需要2个参数newElement和targetElement。为了方便顺便把targetElement的parentNode保存起来未parent。

二，接着判断targetElement是不是为parent的最后一个元素，即判断是否为lastChild。如果是就直接把newElemet添加到parent里

三，如果targetElement不是最后一个元素，就用targetElement的nextSibling属性，得到targetElement的下一个兄弟元素，之后用insertBefore插入到兄弟元素之前就可以了。

以下就具体代码

//在元素后插入新元素
function insertAfter(newElement, targetElement) {
    "use strict";
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

转载于:https://my.oschina.net/l3ve/blog/160283