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

一、创建节点

在使用JQuery的时候，我们有多种方式来创建新节点，使用不同方式创建的新节点都可以采用相同的方法插入到HTML页面中。

1.使用HTML标签创建节点

var node_1 = "这是创建的第一个节点"

2.使用jQuery创建节点

var node_2 = $("").text("这是创建的第二个节点");

3.使用DOM创建节点

var node_3 = document.createElement("li"); node_3.innerHTML = "这是创建的第三个节点"

以上三种方式都可以创建节点，不过这推荐使用HTML标签创建节点，有以下优势：
- 如果需要同时创建多个节点，使用这种方式最为方便，代码如下
var node_4 = ` 我是标题一我是内容区域我是内容区域我是内容区域我是标题二我是内容区域我是内容区域我是内容区域 `;
- 如果需要如果需要向页面中插入多个相同的节点，只能够使用这种方式，使用其他，代码如下：
  $('.box').append(node_4); $('.box').append(node_4); // 如果使用其他两种方式，即使执行两次插入，但是最终HTML页面上只能显示一个节点。

二、插入节点

jQuery提供了四个方法可以来实现向页面中插入节点

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

示例代码如下：

// 新创建的元素li被插入到ul内部，并且位于ul的尾部，成为ul的最后一个元素 var node_1 = "这是创建的第一个节点" $('ul').append(node_1); // 新创建的元素li被插入到ul内部，并且位于ul的顶部，成为ul的第一个元素 var node_1 = "这是创建的第一个节点" $('ul').prepend(node_1); // 新创建的元素li被插入到ul外部，位置在ul后面 var node_1 = "这是创建的第一个节点" $('ul').after(node_1); // 新创建的元素li被插入到ul外部，位置在ul前面 var node_1 = "这是创建的第一个节点" $('ul').before(node_1);

三、删除元素

jQuery提供了两个方法来实现从页面中删除元素

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

示例代码：

// 将元素$("#box")及其子元素全部删除 $("#box").remove(); // 将元素$("#box")子元素全部删除,但是$("#box")元素不会被删除 $("#box").empty(); // 过滤被删除的元素，例如:只删除 class="box" 的所有元素，其他的【jQuery语法——创建节点、插入节点、删除元素】元素被保留 $("p").remove(".box");