好多时候我们都要在一些地方插入必要的节点,在jQuery中有如下几种方法,现在来介绍一下他们的用法和区别。
1、内部追加类
append():向
单个匹配的元素内部追加内容
例如:html:<p>我爱吃:</p>
jQuery:$('p').append("<b>苹果</b>");
结果:<p>我爱吃:<b>苹果</b></p>
appendTo():将所有匹配的元素追加到指定的元素中,为之上方法的颠倒操作
例如:html:<p>我爱吃:</p>
jQuery:$("<b>苹果</b>").appendTo('p');
结果:<p>我爱吃:<b>苹果</b></p>
2、内部前置类
prepend():向每个匹配的元素内部前置内容
例如:html:<p>我爱吃:</p>
jQuery:$('p').predend("<b>苹果</b>");
结果:<p><b>苹果</b>我爱吃:</p>
prependTo():将所有匹配的元素前置到指定的元素中,为之上方法的颠倒操作
例如:html:<p>我爱吃:</p>
jQuery:$("<b>苹果</b>").prependTo('p');
结果:<p><b>苹果</b>我爱吃:</p>
3、外部追加类
after():在每个匹配的元素之后插入内容
例如:html:<p>我爱吃:</p>
jQuery:$('p').after("<b>苹果</b>");
结果:<p>我爱吃:</p><b>苹果</b>
insertAfter():将所有匹配的元素插入到指定元素的后面,为之上方法的颠倒操作
例如:html:<p>我爱吃:</p>
jQuery:$("<b>苹果</b>").insertAfter('p');
结果:<p>我爱吃:</p><b>苹果</b>
4、外部前置类
before():在每个匹配的元素之前插入内容
例如:html:<p>我爱吃:</p>
jQuery:$('p').before("<b>苹果</b>");
结果:<b>苹果</b><p>我爱吃:</p>
insertBefore(): 将所有匹配的元素插入到指定的元素的前面,为之上方法的颠倒操作
例如:html:<p>我爱吃:</p>
jQuery:$("<b>苹果</b>").insertBefore('p');
结果:<b>苹果</b><p>我爱吃:</p>
插入节点的方法不仅可以创建节点,还可以对原有的DOM元素进行移动。只是我没有移动过。
分享到:
相关推荐
jquery 插入节点 节点jquery 插入节点 节点
jQuery插入节点1
Jquery节点插入、复制和替换方法总结
本文实例讲述了jQuery插入节点和移动节点的方法。分享给大家供大家参考,具体如下: 1. 插入节点: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <...
本文实例讲述了JQuery插入DOM节点的方法。分享给大家供大家参考。具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个...
下面小编就为大家带来一篇jquery插入兄弟节点的操作方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
添加节点的方法有很多,在本文将为大家介绍下jquery中添加节点几种方法,感兴趣的朋友可以参考下
如果要将某个节点用其他标记包裹起来,JQuery提供了相应的方法,即wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义。 wrap() 代码如下:$(“#li_1”).wrap(“<strong></...
(一)、jQuery方法 1、在节点内部插入: 方法 说明 append() 向每个匹配的元素内部追加内容 appendTo() 把所有的元素追加到另一个指定的元素集合中,实际上是颠倒了append()的用法。如$(A).append(B...
下面小编就为大家带来一篇Jquery对新插入的节点 绑定Click事件失效的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。 目录 简介 找到你了! Jquery对象 代替body标签的onload 事件机制 同一函数实现get\set ...
本章节主要介绍了jQuery在HTML中动态插入节点的各种方法,制作成表格,方便大家对比学习,需要的朋友可以参考下
教程名称:尚硅谷jQuery视频教程(25集)课程目录:【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10....尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val() 方法 20. 小结2 21. CSS DOM 操作 22. 事件处理 23....
动态插入节点方法 动态插入节点方法 复制元素节点 替换元素节点 包裹元素节点 遍历元素 删除元素 数据管理 第4章 事件中的冒泡现象 bind方法绑定事件 映射方式绑定不同的事件 切换事件hover 切换事件...