jsDOM增删改查操作

            /*
             * dom节点增删改查
             * */

//html标签元素

<input id="btn_1" type="button" value="追加一个节点" /><br/>
        <input id="txt_2" type="text"/>
        <input id="btn_2" type="button" value="追加一个输入内容的节点"/><br />
        <input id="btn_4" type="button" value="在所有li之前插入一个节点"/><br />
        <input id="txt_3" type="text"/>
        <input id="btn_3" type="button" value="在第三个li之前插入一个输入内容的节点"/><br />
        <input id="btn_5" type="button" value="删除最后一个节点" /><br />
        <input id="txt_6" type="number" placeholder="默认为第二个节点"/>
        <input id="btn_6" type="button" value="查找一个节点并添加背景色" /><br />
        <ul id="ul">
            <li>原li一</li>
            <li>原li二</li>
            <li>原li三</li>
        </ul>

//js代码

window.οnlοad=function(){

            
             
            /*
             * createElement(标签名)  创建一个节点
             * appendChild(节点)  追加一个节点
             * */
            
            
            var ul=document.getElementById("ul");
            var btn_1=document.getElementById("btn_1");
            btn_1.οnclick=function (){
                var oli=document.createElement("li");
                ul.appendChild(oli);
            }
            var txt_2=document.getElementById("txt_2");
            var btn_2=document.getElementById("btn_2");
            btn_2.οnclick=function(){
                var oli=document.createElement("li");
                oli.innerText=txt_2.value;
                ul.appendChild(oli);
            }
            
            
            /*
             * insertBefore(节点, 原有节点)  在已有元素前插入
             */
            
            
            var btn_3=document.getElementById("btn_3");
            var txt_3=document.getElementById("txt_3");
            var list_3=ul.getElementsByTagName("li");
            btn_3.οnclick=function(){
                if(list_3[2]){
                    var oli=document.createElement("li");
                    oli.innerText=txt_3.value;
                    ul.insertBefore(oli,list_3[2]);
                }
                else{
                    alert("不存在此节点");
                }
                
            }
            
            var btn_4=document.getElementById("btn_4");
            var list_4=ul.getElementsByTagName("li");
            btn_4.οnclick=function(){
                var oli=document.createElement("li");
                oli.innerText="插入的节点";
                ul.insertBefore(oli,list_3[0]);
            }
            
            
            /*
             * removeChild(节点)  删除一个节点
             * */
            
            
            //删除最后一个li节点
            var btn_5=document.getElementById("btn_5");
            var list_5=ul.getElementsByTagName("li");
            btn_5.οnclick=function(){
                
                ul.removeChild(list_5[list_5.length-1]);
            }
            
            //查找li元素
            var btn_6=document.getElementById("btn_6");
            var txt_6=document.getElementById("txt_6");
            var list_6=ul.getElementsByTagName("li");
            var a=2;
            btn_6.οnclick=function (){
                if(txt_6.value!=""){
                    a=txt_6.value;
                }
                if(list_6[a-1]){
                    list_6[a-1].style.backgroundColor="gold";
                }
                else{
                    alert("li中第"+a+"节点不存在")
                }
            }

        }

操作结果