原生js实现可添加、删除的行

原生js实现可添加、删除的行

前端萌新学习笔记，不喜勿喷。

首先你需要一个乘放可编辑行的容器，可能它长下面这样，也可能不长这样

<div class="container"></div>

初始化方法时需要给容器添加一行

function init(){
    //获取容器dom节点，添加行
}
init();

新增一行时，需要向点击的span的父元素后添加一行，但是原生js只有insertBefore（新节点，插入节点），当然jquery有insertAfter方法

• w3c对此方法的描述如下：insertBefore() 方法可在已有的子节点前插入一个新的子节点。此方法可返回新的子节点。

一般情况下，插入的节点如果有多层嵌套或者子元素过多，通过createElement等方法创建是比较繁琐的，而insertBefore方法并不能直接将拼接的html字符串解析为dom元素插入，所以需要用到另一个方法Range.createContextualFragment()，此方法可以将拼接的html字符串转换成文档片段。

• MDN 对此方法描述如下：Range.createContextualFragment() 该方法通过调用HTML片段解析算法或XML片段解析算法返回一个文档片段 DocumentFragment 。链接地址

function addRow(ele){
            let str=`<div style="margin-bottom: 5px">
                                <span style="display: inline-block;width: 80px">内部字段名:</span>
                                <div style="width: 200px;display: inline-block">
                                    <input class="form-control" value="" />
                                </div>
                                <span  style="display: inline-block;width: 80px">映射字段名:</span>
                                <div style="width: 200px;display: inline-block">
                                     <input class="form-control" value=""  />
                                </div>
                                <div style="display: inline-block;width: 20px" οnclick="delRow(this)">
                                    <img class="ss-strgy-operate-img" src="/win/images/delete-rule.png">
                                </div>
                                <div style="display: inline-block;width: 20px" οnclick="addRow(this)">
                                    <img class="ss-strgy-operate-img" src="/win/images/rule-add.png">
                                </div> 
                             </div>`
            let range=document.createRange()
            let documentFragment =range.createContextualFragment(str);//创建需要插入的文档片段
            if(ele.parentNode.parentNode.lastChild===ele.parentNode){//当点击节点父节点为最后一个时只需使用append方法在最后追加
                ele.parentNode.parentNode.append(documentFragment )
            }else{//不是最后一个时在下一个节点之前插入
                ele.parentNode.parentNode.insertBefore(documentFragment,ele.parentNode.nextSibling)
            }
        },

删除行时，只需通过点击的div传入的this找到父元素，也就是要删除的那一行，从父元素的父元素中remove掉父元素即实现了删除当前行的功能。

function delRow(ele){
    ele.parentNode.parentNode.removeChild(ele.parentNode);
},

效果如下图