js元素动态添加和删除

javascript基础代码

代码	作用
JSON.parse();	String转json
JSON.stringify()	json 转 String
typeof 对象	得到对象类型

---

appendChild

appendChile(添加的内容) 被选元素的结尾添加、

            //js代码
            window.onload=function(){
                var lx=document.createElement("div");//创造一个div元素
                var textm=document.createTextNode("娃哈哈");//创造一个文本节点
                lx.appendChild(textm);//为div添加文本节点
                var dkj=document.querySelector("#dkj");//得到id为dkj的元素
                dkj.appendChild(lx);//把lx添加到dkj里面
            }

            //body代码
            <div id="dkj">
                <div id="s1">第一</div>
                <div id="s2">第二</div>
                <div id="s3">第三</div>
            </div>

效果图

insertBefore

insertBefore(添加的元素,添加的元素位置前) 添加到指定的位置

            //js代码
            window.onload=function(){
                var lx=document.createElement("div");
                var textm=document.createTextNode("娃哈哈");
                lx.appendChild(textm);
                var dkj=document.querySelector("#dkj");
                var s2=document.querySelector("#s2");//得到id为s2的元素
                dkj.insertBefore(lx,s2);//第一个填你添加的元素,第二个填你要添加的位置
            }

            //body代码
            <div id="dkj">
                <div id="s1">第一</div>
                <div id="s2">第二</div>
                <div id="s3">第三</div>
            </div>