jQuery语法——创建节点、插入节点、删除元素

一、创建节点

在使用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提供了四个方法可以来实现向页面中插入节点

方法	描述
apeend()	在被选元素的结尾插入内容
prepend()	在被选元素的开头插入内容
after()	在被选元素之后插入内容
before()	在被选元素之前插入内容

• 示例代码如下：

// 新创建的元素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提供了两个方法来实现从页面中删除元素

方法	描述
remove()	删除被选元素（及其子元素）
empty()	从被选元素中删除子元素，但是会保留当前的备选元素

• 示例代码：

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

// 将元素$("#box")子元素全部删除,但是$("#box")元素不会被删除
$("#box").empty();

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