js和jq动态操作元素总结

写在前面的话：

　　最近忙于面试，博客少有更新。这样不好，我要自我检讨。回归正题，今天想借四月份的最后一天总结一下js和jq动态操作元素的各种方法。

动态创建元素：

　　　　　　　 //js 创建元素
            var div=document.createElement('div');
            //jq 创建元素
            var obj=$("<div>");//或者obj=$("<div></div>")

 

jquery 也可以一次性创建多个元素

$("<div id='jqdiv0'><div id='jqdiv1'><div id='jqdiv2'>");
//或者
 $("<div id='jqdiv0'><div id='jqdiv1'><div id='jqdiv2'></div></div></div>");

 动态添加元素：

　　　　　　 　//js 创建元素
            var div=document.createElement('div');
            //jq 创建元素
            var obj=$("<div>");
            //js 添加元素到页面
            document.getElementById("jsdiv").appendChild(div);
            //jq 添加元素到页面
            $("#jqdiv").append(obj);
    

动态的移除元素：

   　　　　　 //js 创建元素
            var div=document.createElement('div');
            //jq 创建元素
            var obj=$("<div>");
            //js 添加元素到页面
            document.getElementById("jsdiv").appendChild(div);
            //jq 添加元素到页面
            $("#jqdiv").append(obj);
            //js 移除元素
                //第一种
            document.getElementById("jsdiv").removeChild(div);
                //第二种
            document.getElementById("jsdiv").innerHTML="";
            //jq 移除元素
                //第一种
            $("#jqdiv").children('div').remove();
                //第二种
            $("#jqdiv").empty();

 动态的添加属性：

　　　　　　  //js 设置属性
            jsdivChild.setAttribute('style','border:2px solid red;');//jq 设置属性
            jqdivChild.attr('style',"border:3px solid blue");

动态的移除属性：

　　　　　　  //js 移除属性
            jsdivChild.removeAttribute('style');
            //jq 移除属性
            jqdivChild.removeAttr('style');