一、創建節點

在使用JQuery的時候，我們有多種方式來創建新節點，使用不同方式創建的新節點都可以采用相同的方法插入到HTML頁面中。

• 1.使用HTML標簽創建節點

var node_1 = "<li>這是創建的第一個節點</li>"

• 2.使用jQuery創建節點

var node_2 = $("<li></li>").text("這是創建的第二個節點");

• 3.使用DOM創建節點

 var node_3 = document.createElement("li");
 node_3.innerHTML = "這是創建的第三個節點"

• 以上三種方式都可以創建節點，不過這推薦使用HTML標簽創建節點，有以下優勢：

  • 如果需要同時創建多個節點，使用這種方式最為方便，代碼如下

  var node_4 = `<div>
                    <h1>我是標題一</h1>
                    <p>我是內容區域</p>
                    <p>我是內容區域</p>
                    <p>我是內容區域</p>
                </div>
                <div>
                    <h2>我是標題二</h2>
                    <p>我是內容區域</p>
                    <p>我是內容區域</p>
                    <p>我是內容區域</p>
                </div>`;
  

  • 如果需要如果需要向頁面中插入多個相同的節點，只能夠使用這種方式，使用其他，代碼如下：

    $('.box').append(node_4);
    $('.box').append(node_4);
    // 如果使用其他兩種方式，即使執行兩次插入，但是最終HTML頁面上只能顯示一個節點。
    

二、插入節點

• jQuery提供了四個方法可以來實現向頁面中插入節點

• 示例代碼如下：

// 新創建的元素li被插入到ul內部，并且位于ul的尾部，成為ul的最后一個元素
var node_1 = "<li>這是創建的第一個節點</li>"
$('ul').append(node_1);

// 新創建的元素li被插入到ul內部，并且位于ul的頂部，成為ul的第一個元素
var node_1 = "<li>這是創建的第一個節點</li>"
$('ul').prepend(node_1);

// 新創建的元素li被插入到ul外部，位置在ul后面
var node_1 = "<li>這是創建的第一個節點</li>"
$('ul').after(node_1);

// 新創建的元素li被插入到ul外部，位置在ul前面
var node_1 = "<li>這是創建的第一個節點</li>"
$('ul').before(node_1);

三、刪除元素

• jQuery提供了兩個方法來實現從頁面中刪除元素

• 示例代碼：

// 將元素$("#box")及其子元素全部刪除
$("#box").remove();

// 將元素$("#box")子元素全部刪除,但是$("#box")元素不會被刪除
$("#box").empty();

// 過濾被刪除的元素，例如:只刪除 class="box" 的所有 <p> 元素，其他的<p>元素被保留
$("p").remove(".box");