Js原生与jQuery的Dom操作

一、创建节点

1、原生js创建元素节点

document.createElement('div');

2、jquery创建元素节点

$('<div></div>');

二、创建、添加文本节点

1、原生js创建文本节点，然后添加到元素节点中

var txt = document.createTextNode('文本');

var el = document.createElement('div');
el.appendChild(txt);

2、jquery创建文本节点和元素节点

$('<div>文本</div>')

三、复制节点

1、原生js复制节点

var newEl = el.cloneNode(true);

其中参数： true表示克隆整个<div>文本</div>节点；   false表示只克隆<div></div>，不包括其中的文本节点

2、原生js复制节点 

var $newEl = $(el).clone(true);

四、插入节点

1、原生js在列表尾添加新节点

el.appendChild(newNode);

原生js在节点已有子节点之前插入一个新的子节点

el.insertBefore(newNode, targetNode);

使用例子：http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_insertbefore

2、jQuery插入节点。方法比较多

（1）、在尾部添加节点

$('#el').append('<div>文本</div>');
或者
$('<div>文本</div>').appendTo('#el');

（2）、在头部添加节点

$('#el').prepend('<div>文本</div>');
或者
$('<div>文本</div>').prependTo('#el');

（3）、在匹配元素之前添加目标内容

$('#el').before('<div>文本</div>');
或者
$('<div>文本</div>').insertBefore('#el');

（4）、在匹配元素的后面添加目标内容

 $('#el').after('<div>文本</div>');
 或者
 $('<div>文本</div>').insertAfter('#el');

五、删除节点

1、原生js删除节点 removeChild

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);

示例：http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_removechild

2、jquery删除节点

（1）、remove() - 删除被选元素（及其子元素） 

$("#div1").remove(); // 整个div1节点被删除

（2）、empty() - 删除被选元素的子元素。

$("#div1").empty(); //div1中的节点被删除

六、替换节点

1、原生js替换节点 

replaceChild() 方法用新节点替换某个子节点。

document.getElementById("myList").replaceChild(newnode,oldnode);

示例：http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_replacechild

2、jquery替换节点

replaceWith()

$('div').replaceWith('<p>文本</p>')

七、设置/获取属性

1、原生js设置/获取属性

el.setAttribute('href', 'www.baidu.com');
el.getAttribute('href');

2、jq设置获取属性

$('a').attr('href', 'www.baidu.com');
$('a').attr('href')

八、访问节点（这里只介绍原生js访问节点的方法。jq可以通过多种选择器和方法来访问节点）

1、原生js访问节点方法

document.getElementById('id');
document.getElementsByTagName('tagname');
document.getElementsByClassName('class');

2、原生js方法父子、兄弟节点

el.childNodes   // 返回子元素集合
el.parentNode   // 返回父节点


el.nextSibling     // 返回位于相同节点树层级的下一个节点。注意后面不用跟()
el.previousSibling // 返回位于相同节点树层级的前一个元素