JQuery节点操作

目的： 熟悉jquery中添加或删除子节点及添加或删除兄弟节点等操作；

概要：了解jQuery中添加子节点（添加子元素）、删除子节点（删除子元素）、添加兄弟节点（添加同级
元素）、删除兄弟节点（删除同级元素）；

关键字： jQuery，节点，添加，删除

内容：在进行Java开发过程中，经常需要对html DOM中的节点进行操作，包括节点的添加、删除、修改等操
作，这又分为单个节点的操作和多个节点的批 量操作，批量操作依托的手段主要是jQuery选择器的作用。

jQuery中对节点的添加、删除操作的方法比较多，如果平时不加留意容易记混，使用时就无法达到预 期的效果，在这里，我稍加整理，以便复习、巩固、记忆，在以后的开发过程中希望不再踟躇不定，提高效率，节约时间。

一、添加操作

• append()-在被选元素的结尾插入内容；
• prepend()-在被选元素的开头插入内容；
• after()-在被选元素之后插入内容；
• before()-在被选元素之前插入内容；

使用说明：

在使用时，如果要添加的是同级元素，则选择after()或before()；如果要添加的是下级元素，则用 append或prepend。

用法示例：

① append:

<div  id= "div1" >div1</div>

当使用$("#div1").append("<div>div2</div>")，执行结果如下：

<div  id ="div1"> div1 <div>div2</div></div>

② prepend:

<p id= "textP">Text Here</p>

当使用$("#textP").prepend("<b>Insert words</b>"),执行结果如下：

<p id="textP"><b>Insert words</b>Text Here</p>

③ after:

<div id= "div1">div1</div>

当使用$("#div1").after("<div>div2</div>")，执行结果如下：

<div id= "div1">div1</div><div>div2</div>

④ before:

<p id= "textP">Text Here</p>

当使用$("#textP").before("<b>Insert words</b>"),执行结果如下：

<b>Insert words</b><p id= "textP">Text Here</p>

二、删除操作

执行删除操作的方法主要有以下两个：

• remove()-删除被选元素（及其子元素）；
• empty()-从被选元素中删除子元素；

使用说明：

如果要删除的元素不仅仅是其子元素，还包括选中的元素本身，则使用remove()，如果仅仅删除选中元素的子元素，则使用empty()。

用法示例：
① remove():

<div id = "#div">
    <p>Text1</p>
    <p>Text1</p>
    <p>Text1</p>
</div>

当使用$(“#div”).remove()进行操作时，以上代码都将会在页面中移除;

② empty():

<div id="#div">
    <p>Text1</p>
    <p>Text1</p>
    <p>Text1</p>
</div>

当使用$(“#div”).empty()进行操作时，以上代码的执行结果是：

<div id = "#div"></div>