原生JS和Jquery操作dom

整理一下，方便复习。

创建元素节点

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");