1.6 节点的增加与删除

一、ＨＴＭＬ结构

<input type="text" id="inputGet"/>
<button id="leftIn">左侧进入</button>
<button id="rightIn">右侧进入</button>
<button id="leftOut">左侧删除</button>
<button id="rightOut">右侧删除</button>
<div id="container">

</div>

二、ｃｓｓ

span{
        width:40px;
        height:40px;
        background-color: deeppink;
        color: white;
        font-size:25px;
        line-height: 40px;
        display: inline-block;
        text-align: center;
        margin-left:10px;
        margin-right:10px;
    }

三、利用原生ｊｓ的insertAdjacentHTML方法对节点进行操作

window.οnlοad=function(){
     var leftIn=document.getElementById("leftIn");
     var rightIn=document.getElementById("rightIn");
     var leftOut=document.getElementById("leftOut");
     var rightOut=document.getElementById("rightOut");
     var queueShow=document.getElementById("queueShow");
     var inputGet=document.getElementById("inputGet");
     var spanList=document.getElementsByTagName("span");


     //依据参数a对父节点添加第一个子节点("afterbegin")、最后一个子节点("beforeend")
     function addDom(a){
     var value=inputGet.value;
     var items="<span>"+value+"</span>";
     queueShow.insertAdjacentHTML(a,items);
     }
     //根据参数b对父节点删除第一个子节点[0]、最后一个子节点[length-1]
     function removeDom(b){
     alert("当前您删除的数据是："+queueShow.childNodes[b].innerHTML);
     queueShow.removeChild(queueShow.childNodes[b]);
     }

     leftIn.onclick=function(){
     addDom("afterbegin");
     };
     rightIn.onclick=function(){
     addDom("beforeend");
     };
     leftOut.onclick=function(){
     removeDom(0);
     };
     rightOut.onclick=function(){
     var len=queueShow.childNodes.length;
     removeDom(len-1);
     };
     function spanClick(a){
     alert("您当前删除的数据是"+a.innerHTML);
     a.parentNode.removeChild(a);
     }
     queueShow.addEventListener("click", function(event) {
     if (event.target.nodeName.toLowerCase() === 'span')
     {
     spanClick(event.target);
     }
     });

     };

四、利用ｊｓ的队列进行对节点的操作

   var container=document.getElementById('container');
    var listArray = [];

    function leftPush(number) {
        var newElement = document.createElement('span');
        newElement.innerText= number;
        listArray.unshift(newElement);
        refreshContainer(listArray);
    }

    function leftPop() {
        var targetElement = listArray.shift();
        alert(targetElement.innerHTML);
        refreshContainer(listArray);
    }
    function rightPush(number) {
        var newElement = document.createElement('span');
        newElement.innerText = number;
        listArray.push(newElement);
        refreshContainer(listArray);
    }

    function rightPop() {
        var targetElement = listArray.pop();
        alert(targetElement.innerHTML);
        refreshContainer(listArray);
    }

    function refreshContainer(listArray) {
        container.innerHTML = '';
        for (i in listArray) {
            container.appendChild(listArray[i]);
        }
    }
    var leftIn=document.getElementById("leftIn");
    var rightIn=document.getElementById("rightIn");
    var leftOut=document.getElementById("leftOut");
    var rightOut=document.getElementById("rightOut");
    var inputGet=document.getElementById("input

Get");

    leftIn.onclick=function(){
        var val=inputGet.value;
        leftPush(val);
    };
    rightIn.onclick=function(){
        var val=inputGet.value;
        rightPush(val);
    };
    leftOut.onclick=function(){
        leftPop();
    };
    rightOut.onclick=function(){
        rightPop();
    };

五、最终效果

 

转载于:https://www.cnblogs.com/wuliwuli/p/5714823.html