操縱元素

完整文件：Manipulation Documentation

• .html() - 取得和設定HTML內容
• .text() - 取得和設定文字內容；HTML會被剝離
• .attr() - 取得或設定提供的屬性值
• .width() - 取得或設定選區中第一個元素的寬度(以畫素為單位，整數值)
• .height() - 取得或設定選區中第一個元素的高度(以畫素為單位，整數值)
• .position() - 取得一個物件，其中包含選區中第一個元素相對於其第一個定位父元素的位置資訊
• .val() - 取得或設定表單元素的值

此種改變會影響選區中的所有元素，若要改變選區中某個特定元素，請特別指定。

// 假定 DIV 有多個 <p> 元素
// 現指定為 DIV 中的第一個 <p> 元素
$( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" );

移動、複製、遷移元素

大體上有兩種途徑來移動DOM周圍的元素：

• 將被選擇元素相對於另一個元素放置
• 將另一個元素相對於被選擇元素放置

例如：.insertAfter()方法，將被選擇元素放置於作為引數傳入方法的元素之後。.after()方法，將作為引數傳入方法的元素放置於被選擇元素之後。.insertBefore()

// 通過不同的途徑移動元素
 
// 降低一個列表元素變更為最後一個元素
var li = $( "#myList li:first" ).appendTo( "#myList" );
 
// 另一種方式
$( "#myList" ).append( $( "#myList li:first" ) );
 

克隆元素

// 複製元素
 
// 複製列表的第一個元素，然後新增到列表的最後一位
$( "#myList li:first" ).clone().appendTo( "#myList" );

如要同時複製元素相關的資料和事件，.clone()方法中要傳入true引數。

移除元素

使用.remove()方法，永久地從頁面移除被選擇元素。當.remove()方法返回被移除的元素，但若將該被返回的元素返回到頁面上，那麼該元素中不會再含有原先相關聯的資料和事件。

使用.detach()方法移除被選擇的元素，該方法返回的元素會繼續保持原先相關的資料和事件。

若是將元素保留在頁面上，只是移除該元素的內容，可以使用.empty()方法來處理元素內部的HTML。

建立新元素

使用$()方法來建立新元素

// 通過HTML字串建立元素
$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );

// 使用屬性物件建立新元素
$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});
// 由於class是保留關鍵字，所以需要使用雙引號包起來

// Getting a new element on to the page.
 
var myNewElement = $( "<p>New element</p>" );
 
myNewElement.appendTo( "#content" );
 
myNewElement.insertAfter( "ul:last" ); // This will remove the p from #content!
 
$( "ul" ).last().after( myNewElement.clone() ); // Clone the p so now we have two.

可以將建立的元素，立即加入頁面中，而無需先將建立的元素保存於某個變數中。

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );

迴圈重複的將類似的元素加入DOM中，非常消耗效能。若要將許多元素加入相同的容器中，應當先將所有的HTML連線成一個字串，之後再加入容器中，這樣比較節約資源。例如：

var myItems = [];
var myList = $( "#myList" );
 
for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>item " + i + "</li>" );
}
 
myList.append( myItems.join( "" ) );

操縱屬性

// 操縱單一的屬性
$( "#myDiv a:first" ).attr( "href", "newDestination.html" );

// 操縱多個屬性
$( "#myDiv a:first" ).attr({
    href: "newDestination.html",
    rel: "nofollow"
});

// 使用函式來確定屬性的新值
$( "#myDiv a:first" ).attr({
    rel: "nofollow",
    href: function( idx, href ) {
        return "/new/" + href;
    }
});
 
$( "#myDiv a:first" ).attr( "href", function( idx, href ) {
    return "/new/" + href;
});