整理一下,方便复习。
创建元素节点
1.原生:
document.createElement("div")
2.jquery:
$("<div></div>")
创建文本节点并加入元素节点中
1.原生:
vartext=document.createTextNode("文本内容");varp=document.createElement("p"); p.appendChild(text);
2.jquery:
var$p=$('<p>Hello World</p>');
复制节点
1.原生:
varnewP = p.cloneNode(true);
true和false的区别:
true :克隆整个'<p>Hello World</p>'节点
false:只克隆'' ,不克隆文本Hello World.'
2.jquery:
$newP = $('#p').clone(true);
注意:克隆节点要避免ID重复
插入节点
1.原生
1.parent.appendChild(node);//尾部插入
2.parent.insertBefore(newnode,targetnode);//在targetnode元素之前插入newnode,没有参数的时候默认在父元素的头部插入
2.jquery:
1.$('#p').append('<p>Hello World</p>');
$('<p>Hello World</p>').appendTo('#p')//在#p元素的尾部插入
2.$('#p').prepend('<p>HelloWorld</p>');
$('<p>Hello World</p>').prependTo('#p')//在#p元素的头部插入
3.$('#p').before('<p>HelloWorld</p>')
$('<p>Hello World</p>').insertBefore('#p');//在后面元素之前插入
4..$('#p').after('<p>HelloWorld</p>');
$('<p>Hello World</p>').insertAfter('#p');//在后面元素之后插入
删除节点
1.原生:
parent.removeChild(node);//在parent节点中删除node节点
2.jquery
$('#p').remove();//删除该节点
替换节点
1.原生
parent.replaceChild(newNode,oldNode);//在父节点中替换节点
注意:oldNode必须是parentEl真实存在的一个子节点
2.jquery
$('#p').replaceWith('<p>Hello World</p>');//使用后面的节点替换前面的节点
获取和设置属性
1.原生:
node.setAttribute("title", "logo");//设置node的title属性的值为logo
node.getAttribute("title");//获取title属性的值
checkboxEl.checked =true;
checkboxEl.checked;
2.jquery
$("#logo").attr({"title":"logo"}); $("#logo").attr("title");
$("#checkbox").prop({"checked":true});
$("#checkbox").prop("checked");