为什么点击这两个按钮时，新的标签都是从左侧插入队列中，为啥appendChild会往左侧插入？

Question

    var inputTxt = document.getElementById("text");
    var btn = document.getElementsByClassName("btn");
    //-----------------------插入函数实现--------------------------------
    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="不妨输入一个数字？" onkeyup="value=value.replace(/[^\d\.]/g,'')">
        <input type="button" value="左侧入" class="btn">
        <input type="button" value="右侧入" class="btn">          
    </form>

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

题目大致如下：
模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及2个操作按钮
点击"左侧入"，将input中输入的数字从左侧插入队列中；
点击"右侧入"，将input中输入的数字从右侧插入队列中；

Answer 1

链接描述

<div  class="vueBox">
    <form action="">
        <input type="text" v-model="num"  placeholder="不妨输入一个数字？" 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>