insertAfter实现

用原生JS实现在一个dom元素后插入新的节点?

在js的dom api中有insertBefore()方法 在已知子节点的前面插入新的子节点。

然而并没有提供insertAfter()方法,在实际开发中遇到了这个问题,自己编写了一个insertAfter方法,运用现有的dom方法属性。

    /**
     * 指定的现有节点之后插入新的节点
     * 
     * @param {Node} newNode 需要插入的节点对象
     * @param {Node} existingNode 现有的节点
     */
    function insertAfter(newNode, existingNode) {
        // 获取现有节点的父元素
        const parent = existingNode.parentNode;

        // 如果父元素中的最后一个子元素 等于 现有的节点
        if (parent.lastChild === existingNode) {
            // 把现有节点放入父元素子节点后面
            // appendChild在子节点后面追加一个元素
            parent.appendChild(newNode);
        } else {
            // .nextSibling 该属性返回指定节点后的第一个节点
            // insertBefore 第一个参数插入的节点对象,第二参数可选,在其之前插入子节点,如果不传,则在结尾插入。
            parent.insertBefore(newNode, existingNode.nextSibling);
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容