為什么點擊這兩個按鈕時，新的標簽都是從左側插入隊列中，為啥appendChild會往左側插入？

    var inputTxt = document.getElementById("text");
    var btn = document.getElementsByClassName("btn");
    //-----------------------插入函數(shù)實現(xiàn)--------------------------------
    function sertValue() {
        var ul = document.getElementById("ul");
        var listItem = document.createElement("li");
        listItem.innerText = inputTxt.value; 
        //左側插入
        if( btn[0].value == "左側入" ) { 
            if(inputTxt.value == ""){
            alert("Don't insert null number!");
        }else{
            //ul.insertBefore(listItem,ul.firstChild);
            ul.insertBefore(listItem,ul.firstChild);
            inputTxt.value = "";
            }   
        return;
        }
        //右側插入
        if( btn[1].value == "右側入" ) { 
            if(inputTxt.value == ""){
            alert("Don't insert null number!");
        }else{
            ul.appendChild(listItem);
            inputTxt.value = "";
            }
        }
        return;
    }

HTML部分

    <form action="">    
        <input type="text" id="text" placeholder="不妨輸入一個數(shù)字？" onkeyup="value=value.replace(/[^\d\.]/g,'')">
        <input type="button" value="左側入" class="btn">
        <input type="button" value="右側入" class="btn">          
    </form>

    <ul id="ul"></ul>

題目大致如下：
模擬一個隊列，隊列的每個元素是一個數(shù)字，初始隊列為空
有一個input輸入框，以及2個操作按鈕
點擊"左側入"，將input中輸入的數(shù)字從左側插入隊列中；
點擊"右側入"，將input中輸入的數(shù)字從右側插入隊列中；
圖片描述

回答

編輯回答

未命名

鏈接描述

<div  class="vueBox">
    <form action="">
        <input type="text" v-model="num"  placeholder="不妨輸入一個數(shù)字？" onkeyup="value=value.replace(/[^\d\.]/g,'')" >
        <input type="button" value="左側入" class="btn" @click="addLeft">
        <input type="button" value="右側入" class="btn" @click="addRight">
        <input type="button" value="左側刪除" class="btn" @click="removeLeft">
        <input type="button" value="右側刪除" class="btn" @click="removeRight">
    </form>
    <ul>
        <li v-for="item in numList">
           {{item}}
        </li>
    </ul>
</div>
<script src="js/vue.min.js"></script>
<script>
    var mv = new Vue({
        el: '.vueBox',
        data () {
            return {
                num:null,
                numList: [1,2,3,4]
            }
        },
        methods: {
            addLeft(){
                this.numList.unshift(this.num)
            },
            addRight(){
                this.numList.push(this.num)
            },
            removeLeft(){
                this.numList.shift()
            },
            removeRight(){
                this.numList.pop()
            }
        }
    })
</script>

2018年5月13日 04:17