JavaScript和jQuery的DOM操作

1、建立元素節點
傳統的javascript方法，建立元素節點

程式碼

var a  = document.createElement("p");

jQuery中建立節點的方法是：

程式碼

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

和 createElement()一樣，建立出來的新元素節點不會被自動添加到文檔裡。
如果想把它添加到文檔裡，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。
比如：

程式碼

var a = $('<p></p>');
$('body').append(a);//添加到body元素的最後

2、建立文本節點
傳統的javascript方法，建立文本節點

程式碼

var b = document.createTextNode("my demo");

通常建立文本節點和建立元素節點配合使用.
比如：

程式碼

var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);

而在jQuery中建立節點就不必那麼麻煩了：

程式碼

$('<p>hello world</p>');

和 createElement()一樣，建立出來的新元素節點不會被自動添加到文檔裡。
如果想把它添加到文檔裡，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。
比如：

程式碼

var a = $('<p>hello world</p>');
$('body').append(a);//添加到body元素的最後

3、複製節點
傳統的javascript方法，複製節點：
比如：

程式碼

var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);
var newpara = container.cloneNode(true);//true和false的區別
document.body.appendChild(newpara );

注意：
true ： 是<p>aaaa</p>複製。
false： 只複製<p></p>，裡面的文本不複製。
可以用 firebug 看看。
在jQuery中複製節點：

程式碼

var a = $('<p>hello world</p>');
$('body').append(a);
var clone_a = a.clone();
$('body').append(clone_a);

和 createElement()一樣，複製出來的新元素節點不會被自動添加到文檔裡。
如果想把它添加到文檔裡，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。
另外還有一個注意：如果複製後，id一樣，不要忘記用.attr("id","new_id")來改變新的節點的ID。
4、插入節點
傳統的 javascript方法，插入節點：
比如：
appendChild()：
給元素追加一個子節點， 新的節點 插入到 最後。

程式碼

var container = document.createElement("p");
document.body.appendChild(container);

insertBefore()：
顧名思義，就是把一個新的節點插入到目標節點的前面。

程式碼

Element.insertBefore(newNode,targerNode );

在 jQuery中插入節點比javascript內建的多了很多,
比如：

引用內容

.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()

所以對dom操作的簡化也是jquery的亮點之一。
5、刪除節點
傳統的 javascript方法，刪除節點：
比如：

程式碼

var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);

在jQuery中的刪除節點：
比如：

程式碼

$('#test2').remove();

6、替換節點
傳統的javascript方法，替換節點：
比如：

程式碼

Element.repalceChild( newNode , oldNode );

oldNode必須是Element的一個子節點。
在 jQuery中的替換節點：
比如：

程式碼

$("<p>替換 test1！</p>").replaceAll("#test1");

7、設定屬性,擷取屬性
傳統的javascript方法，設定屬性,擷取屬性：
比如：

程式碼

setAttribute();// 設定
var a  = document.createElement(“p”);
a.setAttribute("title","my demo");

不管以前有沒有title屬性，以後的值是 my demo。

程式碼

getAttribute();// 擷取
var a =document.getElementById("cssrain");
var b = a.getAttribute("title");

擷取的時候，如果屬性不存在，則返回空，
在 jQuery中的設定屬性,擷取屬性：
比如：

程式碼

$("#test1").attr({ "class" : "test" , "title" : "TestDemo!" });
$("#test1").attr("class");

8、尋找節點
尋找節點對jQuery來說 簡直是小菜一碟.
jQuery最引入關注的就是尋找節點，也就是通常所說的選取器.
比如：

程式碼

$('#id')
$('.class')
$('tag')
$('tag.class')
$('#id tag')
$('tag#id')
$('#id:visible')
$('#id .class')
$('.class .class')