console 命令行工具 X clear
console
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<script>
    window.onload=function(){
        //top insert事件
        var oTopinsert_btn=document.getElementById("topinsert_btn");
        //为按钮添加点击事件
        oTopinsert_btn.onclick=function(){
            var oInput_txt=document.getElementById("input_txt");
            var oUl=document.getElementById("list");
            var textNode=document.createTextNode(oInput_txt.value);
            
            var oLi=document.createElement("li");//为文本创建一个Li
            oLi.appendChild(textNode);//将文本插入Li
            oUl.insertBefore(oLi,oUl.firstElementChild);//将Li插入UL开头

        }
        //bottom insert事件
        var oBottominsert_btn=document.getElementById("bottominsert_btn");
        //为按钮添加点击事件
        oBottominsert_btn.onclick=function(){
            var oInput_txt=document.getElementById("input_txt");
            var oUl=document.getElementById("list");
            var textNode=document.createTextNode(oInput_txt.value);
            
            var oLi=document.createElement("li");//为文本创建一个Li
            oLi.appendChild(textNode);//将文本插入Li
            oUl.appendChild(oLi);//将Li插入UL末尾

        }
        //删除元素
        var oRemove_btn=document.getElementById("remove_btn");
        oRemove_btn.onclick=function(){
            var oUl=document.getElementById("list");
            oUl.removeChild(oUl.lastElementChild);
        }

    }
   
</script>


</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>SCRIPT</li>
        <li>VUE+</li>

    </ul>
    <input id="input_txt" type="text"/>
    <input id="topinsert_btn" type="button" value="TOP INSERT"/>
    <input id="bottominsert_btn" type="button" value="BOTTOM INSERT"/>
    <input id="remove_btn" type="button" value="RemoveLast"/>
    </br>

</body>
</html>