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扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
js 自动播放的实例代码
Nov 19 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
基于JS判断对象是否是数组
Jan 10 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 include加载文件两种方式效率比较
2010/08/08 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php中请求url的五种方法总结
2017/07/13 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue中组件的3种使用方式详解
2019/03/23 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
python 利用toapi库自动生成api
2020/10/19 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript