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 相关文章推荐
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
p5.js实现简单货车运动动画
Oct 23 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实现的中文分词类完整实例
2017/02/06 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jquery 使用简明教程
2014/03/05 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
js实现选项卡效果
2020/03/07 Javascript
详解React 元素渲染
2020/07/07 Javascript
python 实现插入排序算法
2012/06/05 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python的dict判断key是否存在的方法
2020/12/09 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
车间主任岗位职责
2014/03/16 职场文书
工作评语大全
2014/04/26 职场文书
大学毕业生推荐信
2014/07/09 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
英语投诉信范文
2015/07/03 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
python办公自动化之excel的操作
2021/05/23 Python
CSS3实现指纹特效代码
2022/03/17 HTML / CSS