jQuery和JavaScript节点插入元素的方法对比


Posted in Javascript onNovember 18, 2016

二、插入元素:

<div>
<p>面朝大海,春暖花开</p>
</div>

(一)、jQuery方法

1、在节点内部插入:

方法 说明
append() 向每个匹配的元素内部追加内容
appendTo() 把所有的元素追加到另一个指定的元素集合中,实际上是颠倒了append()的用法。如$(A).append(B)与$(B).appendto(A)是等价的
prepend() 向每个匹配的元素内部前置内容
prependTo() 把所有匹配的元素前置到另一个指定的元素集合中。实际上是颠倒了preprend()的用法。如$(A).prepend(B)与$(B).prenpendTo(B)等价

具体实现如下:

$("div").append("<p>这是append()方法添加的内容</p>");//在div元素下第一个子节点位置插入段落
 $("div").prepend("<p>这是prepend()方法添加的内容</p>");//在div元素下最后一个子节点位置插入段落

下面这两种方法更符合人的一般思维,但效果是一样的

$("<p>这是appendTo方法添加的内容</p>").appendTo("div");//把段落插到div元素的第一个子节点位置
 $("<p>这是prependTo方法添加的内容</p>").prependTo("div");//把段落插到div元素的最后一个子节点位置

jQuery和JavaScript节点插入元素的方法对比

2、在节点外部插入:

方法 说明
after() 在每个匹配的元素之后插入内容
before() 在每个匹配的元素之前插入内容
insertAfter() 把所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore() 把所有匹配的元素插入到另一个指定的元素集合的前面

具体实现如下:

$("div").after("<p>这是after()方法添加的内容</p>");//在div元素后面插入段落
$("div").before("<p>这是before()方法添加的内容</p>");//在div元素前面插入段落
$("div").after("<p>这是after()方法添加的内容</p>");//在div元素后面插入段落
$("div").before("<p>这是before()方法添加的内容</p>");//在div元素前面插入段落

jQuery和JavaScript节点插入元素的方法对比

3、appendTo(),prependTo(), insertBefore(),insertAfter() 方法具有破坏性操作特性,也就是如果选择已经存在内容,并把它们插入到指定对象中时,则原位置的内容将被删除。下面实例中将原div元素中包含的段落文本选中并移到div元素后面。演示如下:
 $("p").insertAfter("div");

jQuery和JavaScript节点插入元素的方法对比

 (二)、JavaScript方法

1、在节点内部插入:appendChild()—--对应于jQuery的append(), insertBefore()---对应于jQuery中的prepend()

 具体效果请看上面jQuery方法。。。

2、自定义JavaScript扩展DOM功能函数================待续~待续~待续

以上就是本文内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
AngularJS中的模块详解
Jan 29 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JS轮播图的实现方法2
Aug 25 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 #Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 #Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 #Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 #Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 #Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 #Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 #Javascript
You might like
再说下636单管机
2021/03/02 无线电
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php购物车实现方法
2015/01/03 PHP
php文件上传简单实现方法
2015/01/24 PHP
降低PHP Redis内存占用
2017/03/23 PHP
浅谈PHP封装CURL
2019/03/06 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
详解Python 中的容器 collections
2020/08/17 Python
python实现简单文件读写函数
2021/02/25 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
小学教师的个人自我鉴定
2013/10/24 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
机械工程师岗位职责
2014/06/16 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
幼儿学前班评语
2014/12/29 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
法院执行局工作总结
2015/08/11 职场文书
军训决心书范文
2015/09/22 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
java解析XML详解
2021/07/09 Java/Android