编程 Javascript

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动态创建元素以及追加节点的实现方法全部内容了，希望大家多多支持三水点靠木~

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS之小练习代码

Oct 12 Javascript

JS中setInterval、setTimeout不能传递带参数的函数的解决方案

Apr 28 Javascript

js面向对象之公有、私有、静态属性和方法详解

Apr 17 Javascript

jQuery鼠标悬浮链接弹出跟随图片实例代码

Jan 08 Javascript

JS制作适用于手机和电脑的通知信息效果

Oct 28 Javascript

jQuery实现ToolTip元素定位显示功能示例

Nov 23 Javascript

JavaScript ES6中const、let与var的对比详解

Jun 18 Javascript

jQuery实现form表单序列化转换为json对象功能示例

May 23 jQuery

模块化react-router配置方法详解

Jun 03 Javascript

解决vue-router 切换tab标签关闭时缓存问题

Jul 22 Javascript

原生js中运算符及流程控制示例详解

Jan 05 Javascript

vue响应式原理与双向数据的深入解析

Jun 04 Vue.js

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