一，创建元素节点：

　　第1个步骤可以使用jQuery的工厂函数$()来完成，格式如下：

　　　　$(html);

　　　　$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

var $li_1 = $("<li></li>"); // 创建第一个<li>元素

var $li_2 = $("<li></li>"); // 创建第二个<li>元素

二，插入元素节点：

　　1.append()

    //<p>我是一个p标签</p>

    //append()向每个匹配的元素内部追加内容

    $('p').append('<p>您好！</p>');

    //结果；<p>我是一个p标签<p>您好！</p></p>

    $('<p>您好！</p>').appendTo('p');

    //结果；<p>我是一个p标签<p>您好！</p></p>

　　2.prepend()

    //<p>我是一个p标签</p>

    //prepend()向每个匹配的元素内部的前面 追加内容

    $('p').prepend('<p>您好！</p>');

    //结果；<p><p>您好！</p>我是一个p标签</p>

    $('<p>您好！</p>').prependTo('p');

    //结果；<p><p>您好！</p>我是一个p标签</p>

　　3.after()

    //<p>我是一个p标签</p>

    //after()向每个匹配的元素之后添加内容

    $('p').after('<p>您好！</p>');

    //结果；<p>我是一个p标签</p><p>您好！</p>

    $('<p>您好！</p>').insertAfter('p');

    //结果；<p>我是一个p标签</p><p>您好！</p>

　　4.before()

　　 //<p>我是一个p标签</p>

    //before()向每个匹配的元素之前添加内容

    $('p').before('<p>您好！</p>');

    //结果；<p>您好！</p><p>我是一个p标签</p>

    $('<p>您好！</p>').insertBefore('p');

    //结果；<p>您好！</p><p>我是一个p标签</p>

三，删除元素节点：

<p title="选择你最喜欢的水果？">你最喜欢的水果是？</p>

  <ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

  </ul>
　　　　//1、 remove() 方法

      //当某个节点用remove() 方法删除后， 该节点所包含的所有后代节点将同时被删除。

      //这个方法的返回值是一个指向已被删除的节点的引用， 因此可以在以后再使用这些元素。

      //该节点所有绑定的事件、 附加的数据都会被删除

      var $li = $("ul li:eq(0)").remove();//

      $li.appendTo("ul");

      //2、 detach() 方法

      //detach () 和remove() 一样， 也是从DOM中去掉所有匹配的元素。

      //但需要注意的是， 这个方法不会把匹配的元素从jQuery对象中删除， 因而可以在将来再使用这些匹配的元素。

      //与remove() 不同的是， 所有绑定的事件、 附加的数据都会保留下来。

      var $li = $("ul li:eq(0)").detach();

      $li.appendTo("ul");

      //3、 empty() 方法

      //严格地讲， empty() 方法并不是删除节点， 而是清空节点， 它能清空元素中的所有后代节点。

      var $li = $("ul li:eq(0)").empty();

      $li.appendTo("ul");

四，复制元素节点：

<p title="选择你最喜欢的水果？">你最喜欢的水果是？</p>

  <ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

  </ul>
 $("ul li:eq(0)").click(function () {

        console.log(this);

        $(this).clone().appendTo('ul');//复制当前单击的节点，并将它追加到ul元素中

      })

五，替换元素节点：

<body>

  <p title="选择你最喜欢的水果？">你最喜欢的水果是？</p>

  <ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

  </ul>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $('p').click(function () {

        $('p').replaceWith('<span>你最不喜欢的水果是？</span>') //span元素替换p元素

        $("<span>你最不喜欢的水果是？</span>").replaceAll('p') //span元素替换p元素

      })

    });

  </script>

</body>

六，包裹元素节点：

<body>

  <p title="选择你最喜欢的水果？">你最喜欢的水果是？</p>

  <ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

  </ul>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $('p').click(function () {

        $('p').wrap('<span></span>');//用<span>标签是包裹住p标签

        //<span><p title="选择你最喜欢的水果？">你最喜欢的水果是？</p></span>

      })

    });

  </script>

</body>

jQuery 节点操作（创建 插入 删除 复制 替换 包裹）的更多相关文章

  1. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  2. ORACLE 11gR2 RAC添加删除（正常及强制）节点操作步骤（删除篇）

    ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇) 本文主要转载 [  http://www.cnxdug.org/?p=2511 ] 有部分细节自己实验添加,再此谢谢前辈. ...

  3. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  4. 节点操作-创建并添加&删除节点&替换&克隆节点

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  5. 第四章 jQuery节点操作

    1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...

  6. 51 jquery 节点操作和 bootstrapt

    jquery 和 bootstrapt1.jquery each 函数 1.each 循环方式一: 可循环对象: var arr =["alex","deng" ...

  7. JQuery --- 第五期 (JQuery节点操作)

    学习笔记 1.JQuery添加节点相关方法 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. jQuery——节点操作

    创建节点 1.$():创建一个li标签 $("<li class='aaa'>我是li标签</li>") 2.html():创建一个li标签并同时添加到ul ...

  9. MySQL进阶11--DDL数据库定义语言--库创建/修改/删除--表的创建/修改/删除/复制

    /*进阶 11 DDL 数据库定义语言 库和表的管理 一:库的管理:创建/修改/删除 二:表的管理:创建/修改/删除 创建: CREATE DATABASE [IF NOT EXISTS] 库名; 修 ...

随机推荐

  1. Gcc对头文件与库文件的搜索路径

    一.简介 对头文件与库文件的搜索路径不太清楚,编译.运行时老碰到问题,ldd查看程序的链接时,总是出现unkown链接. 二.头文件 gcc 在编译时寻找所需要的头文件 : 1)搜寻会从-I开始 2) ...

  2. SQLServer锁的机制

    SQLServer锁的机制:共享锁(S)排它锁(X)更新锁(U)意向共享 (IS)意向排它 (IX) 意向排它共享 (SIX)架构修改(Sch-M) 架构稳定性(Sch-S)大容量更新(BU)

  3. 服务器上如何再另外添加一个E盘

    我的电脑按右键,选择管理..然后在左边选择磁盘管理,然后对着C盘或者D盘按右键,选择压缩卷,等一下下,就会出现个框框让你选择压缩多少,然后多了一个可用空间,再把它分成一个分区就OK拉 步骤:对可用空间 ...

  4. Zookeeper客户端cli_st为何在crontab中运行不正常？

    实践中,发现直接在命令行终端运行cli_st时,能够得到预期的结果,但一将它放到crontab中,则只收到: bye 相关的一段clit_st源代码如下: if (FD_ISSET(, &rf ...

  5. ETL的测试

    二.ETL测试过程: 在独立验证与确认下,与任何其他测试一样,ETL也经历同样的阶段. 1)业务和需求分析并验证. 2)测试方案编写 3)从所有可用的输入条件来设计测试用例和测试场景进行测试 4)执行 ...

  6. 咏南树形下拉列表数据敏感控件--TYNdbTreeList

    咏南树形下拉列表数据敏感控件--TYNdbTreeList 软件系统拥有自己通用的下拉列表控件可以大大地加速系统的开发和易用性. 控件支持DELPHI5及以上版本安装并使用. 控件的用法: proce ...

  7. FIREDAC的TFDJSONDataSets和TFDJSONDeltas查询和提交数据

    服务端代码: uses Data.FireDACJSONReflect, FireDAC.Stan.Storage, FireDAC.Stan.StorageBin, FireDAC.Stan.Sto ...

  8. Android-FileUtils-工具类

    FileUtils-工具类 是对文件操作处理的方法进行了封装,提供了公共的方法: package common.library.utils; import android.annotation.Sup ...

  9. freemarker的include标签

    和jsp的include标签的作用类似,里面也是分相对路径和绝对路径. freemarker的根路径比较奇特的,结构图如下: ----webroot-------page------------ftl ...

  10. OpenglEs开篇

    1.,但博客有接近一年没有写了.虽然有学到东西,但没有记录感觉是是空空的,最近在学习Opengles, 现在开始重操旧业(写博客了).