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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
javascript日期计算实例分析
Jun 29 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
用JS实现选项卡
Mar 23 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
基于php iconv函数的使用详解
2013/06/09 PHP
PHP学习笔记之session
2018/05/06 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
Vue基础配置讲解
2019/11/29 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Django model update的多种用法介绍
2020/03/28 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
Python之多进程与多线程的使用
2021/02/23 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
小学生安全责任书
2014/07/25 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
五好家庭申报材料
2014/12/20 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
物业保洁员管理制度
2015/08/05 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL