动态添加和删除节点元素，函数封装

　　昨天碰到的一道笔试题：向文档html指定元素中动态增加dom节点数据，新增节点自带删除按钮（删除对应节点）。要求：增加的节点数据不能超过10条，至少保留1条节点数据。

HTML：

<div id="container">
    <button id="btn_add" class="btn-add">新增</button> 
    <div id="wrap"></div>  
</div>

script：

思路：将添加的节点方法封装在addDiv()函数里，这样只需重复调用就能动态添加相同的节点。将删除节点函数delDiv()绑定在对应的节点上，这样就能实现删除指定节点了。

window.onload = function(){
    var wrap = document.getElementById('wrap');
    //增加节点
    var addbtn = document.getElementById('btn_add');
    addbtn.onclick = function(){
        if(wrap.childNodes.length < 10){
            addDiv();           
        }else{
            alert('节点数量超过限制，无法添加！');
        }
    }            
    function addDiv(){
        var ele = document.createElement('div');
        ele.className = 'content-wrap';
        var firChildNode = document.createElement('span');
        firChildNode.innerHTML = 'content';
        var secChildNode = document.createElement('button');
        secChildNode.className = 'btn-del';
        secChildNode.innerHTML = '删除';
        ele.appendChild(firChildNode);
        ele.appendChild(secChildNode); 
        wrap.appendChild(ele);
        //按钮添加删除功能
        secChildNode.onclick = delDiv;
    }
    function delDiv(){
        if(wrap.childNodes.length > 1){
            wrap.removeChild(this.parentNode);
        }else{
            alert('最后一个节点无法删除！');
        }        
    }
}

完成代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加和删除节点</title>
</head>
<body>
<div id="container">
    <button id="btn_add" class="btn-add">新增</button> 
    <div id="wrap"></div>  
</div> 

<script>
    window.onload = function(){
        var wrap = document.getElementById('wrap');
        //增加节点
        var addbtn = document.getElementById('btn_add');
        addbtn.onclick = function(){
            if(wrap.childNodes.length < 10){
                addDiv();           
            }else{
                alert('节点数量超过限制，无法添加！');
            }
        }            
        function addDiv(){
            var ele = document.createElement('div');
            ele.className = 'content-wrap';
            var firChildNode = document.createElement('span');
            firChildNode.innerHTML = 'content';
            var secChildNode = document.createElement('button');
            secChildNode.className = 'btn-del';
            secChildNode.innerHTML = '删除';
            ele.appendChild(firChildNode);
            ele.appendChild(secChildNode); 
            wrap.appendChild(ele);
            //按钮添加删除功能
            secChildNode.onclick = delDiv;
        }
        function delDiv(){
            if(wrap.childNodes.length > 1){
                wrap.removeChild(this.parentNode);
            }else{
                alert('最后一个节点无法删除！');
            }        
        }
    }

    // addbtn.onclick = function(){
    //     if(wrap.childNodes.length < 10){
    //         var newele = ele.cloneNode(true);//深复制
    //         wrap.appendChild(newele);            
    //     }else{
    //         alert('节点数量超过限制，无法添加！');
    //     }
    // }
</script> 
</body>
</html>

 

posted @ 2017-09-24 20:54  gq_orange  阅读(1109)  评论(0)  编辑  收藏  举报