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中对数组的操作代码
Aug 12 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
公众号SVG动画交互实战代码
May 31 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
Vue Router中应用中间件的方法
Aug 06 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
PyQt 线程类 QThread使用详解
2017/07/16 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
Linux的文件类型
2012/03/07 面试题
美术指导助理求职信
2014/04/20 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
见习报告格式范文
2014/11/08 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang