一蝇恶、創(chuàng)建節(jié)點

在使用JQuery的時候，我們有多種方式來創(chuàng)建新節(jié)點惶桐，使用不同方式創(chuàng)建的新節(jié)點都可以采用相同的方法插入到HTML頁面中撮弧。

• 1.使用HTML標簽創(chuàng)建節(jié)點

var node_1 = "<li>這是創(chuàng)建的第一個節(jié)點</li>"

• 2.使用jQuery創(chuàng)建節(jié)點

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

• 3.使用DOM創(chuàng)建節(jié)點

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

• 以上三種方式都可以創(chuàng)建節(jié)點，不過這推薦使用HTML標簽創(chuàng)建節(jié)點姚糊，有以下優(yōu)勢：

  • 如果需要同時創(chuàng)建多個節(jié)點贿衍，使用這種方式最為方便，代碼如下

  var node_4 = `<div>
                    <h1>我是標題一</h1>
                    <p>我是內(nèi)容區(qū)域</p>
                    <p>我是內(nèi)容區(qū)域</p>
                    <p>我是內(nèi)容區(qū)域</p>
                </div>
                <div>
                    <h2>我是標題二</h2>
                    <p>我是內(nèi)容區(qū)域</p>
                    <p>我是內(nèi)容區(qū)域</p>
                    <p>我是內(nèi)容區(qū)域</p>
                </div>`;
  

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

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

二秸仙、插入節(jié)點

• jQuery提供了四個方法可以來實現(xiàn)向頁面中插入節(jié)點

• 示例代碼如下：

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

// 新創(chuàng)建的元素li被插入到ul內(nèi)部寂纪，并且位于ul的頂部席吴，成為ul的第一個元素
var node_1 = "<li>這是創(chuàng)建的第一個節(jié)點</li>"
$('ul').prepend(node_1);

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

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

三孝冒、刪除元素

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

• 示例代碼：

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

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

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