目的: 熟悉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>
最新评论
楼主大宝宝听的那个asmr网站发我呗
如果是买的美国地域的,那是不是节点就只有美国的?
已经在内容偏好选择关闭了 还是看不到的 去搜索R18,TIKTOK直接显示社区没这样的内容
看不到R18内容的