动态创建元素及追加元素

1、DOM中创建元素:

.document.write("标签代码");缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉
.innerHTML
.document.createElement("标签的名字")

2、jQuery中创建元素的方式:

.$("标签的代码") 创建元素的方式.$("html标签")可以创建元素
.对象.html("标签的代码");.html("html标签") 也可以创建元素

// 对于创建的元素,立即获取元素,是undefined的,所以可以通过延时0.5s来获取
var canvas = $('<div id="canvas"></div>');
setTimeout( function(){ ctx = $('#canvas'); }, 500);

3、.append()、.appendTo()、.after()、.before()创建元素

var aObj=$("<a href='http://www.baidu.com'>百度</a>");
$("#div").append(aObj);  //把超链接追加到div中   
aObj.appendTo($("#div"));//把aObj对象主动的加到div中 
$("#div").prepend(aObj);//把元素插入到某个元素的前面 
$("#div").after(aObj);//把元素添加到当前元素的后面(兄弟元素来添加) 
$("#div").before(aObj);//把元素添加到当前元素的前面(兄弟元素来添加) 

注意问题 append方法把元素添加到另一个元素中的时候,有点剪切的效果

4、清空元素中的内容(几个常见的方法)

$("#div").html("");//清空元素中的内容
$("#div").empty();//清空元素中的内容
$("#div").remove();//移除元素自身---干掉自己

5、.clone();克隆方法,复制了这个元素

$("#btn2").click(function () {
var spanObj=$("#dv>span").clone();//克隆,复制了这个元素、克隆标签内容
                spanObj.css("fontSize","50px");
$("#dv2").append(spanObj);
});

6、attr()方法、自定义属性

var aObj=$("<a></a>");
attr();可以写两个参数:1参数;属性,2属性值
attr();只写了一个参数,获取该元素的这个属性的值
aObj.attr("title","你好,陌生人");
aObj.attr("href","http://www.zhiquan.com");
aObj.text("一个人的世界");
$("#div").append(aObj);

7、prop()方法、获取和设置属性和属性值

prop()用法和attr()一样;attr()设置checkbox的选中有问题
prop()可以真正的获取元素是否选中的状态

需求:点击按钮让复选框选中,再点按钮让复选框不选中

var flag=$("#div").prop("checked");//获取选中状态
if(flag){
//选中了
$("#div").prop("checked",false);
}else{
//没有选中
$("#div").prop("checked",true);
}
2、全选
$("#div :checkbox").prop("checked",true);
3、不全选
$("#dv :checkbox").prop("checked",false);