欢迎光临
感受代码之美

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>
转载请注明来源:四个空格 » JQuery节点操作

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址