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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
vue实现商城上货组件简易版
2017/11/27 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
bpython 功能强大的Python shell
2016/02/16 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
自荐书模板
2013/12/15 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
导游词之山东孔庙
2019/11/04 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL