jQuery动态创建元素以及追加节点的实现方法


Posted in Javascript onOctober 20, 2016

我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素

例如:

var str = $("<a href='https://3water.com'>三水点靠木</a>");
 $("ul").append(str); //将动态创建的str元素追加到ul下面

追加节点

在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是

append 追加在父元素的最后一个子节点后面

prepend插入到父元素的第一个子节点前面

after在元素后面追加,同级

befor在元素的前面追加,同级

下面的代码可以很好的演示追加节点

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div {
   width: 200px;
   height: 100px;
   border: 1px solid red;
  }
 </style>

 <script src="jquery-1.12.2.js"></script>
 <script>
  $(function () {
   //注意:如果传进来的jQuery对象是页面中存在的元素,它会这个对象剪切,
   // 所以我们会发现点击后,最下面的p标签被剪切了
   var p1 = $("p");
   $("#btn1").click(function () {
    $("div").append(p1);
   });
   $("#btn2").click(function () {
    $("div").prepend(p1);
   });
   $("#btn3").click(function () {
    $("div").after(p1);
   });
   $("#btn4").click(function () {
    $("div").before(p1);
   });
  });
 </script>
</head>
<body>
<input type="button" id="btn1" value="btnAppend"/>
<input type="button" id="btn2" value="btnPrepend"/>
<input type="button" id="btn3" value="btnAfter"/>
<input type="button" id="btn4" value="btnBefore"/>
<div>div标签1</div>
<p>我要插队。。。</p>
</body>
</html>

以上就是小编为大家带来的jQuery动态创建元素以及追加节点的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
js querySelector() 使用方法
Dec 21 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 #Javascript
yarn与npm的命令行小结
Oct 20 #Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 #Javascript
Javascript的动态增加类的实现方法
Oct 20 #Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 #Javascript
javascript淘宝主图放大镜功能
Oct 20 #Javascript
利用Angular.js限制textarea输入的字数
Oct 20 #Javascript
You might like
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
js有序数组的连接问题
2013/10/01 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的面向对象编程方式学习笔记
2016/07/12 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python做接口测试的必要性
2019/11/20 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python的flask框架难学吗
2020/07/31 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
新三好学生主要事迹
2014/01/23 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
记账会计岗位职责
2014/06/16 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
创业计划书之寿司
2019/07/19 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL