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\');