一，创建元素节点：

　　第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. 五款免费的UML建模工具

    1.免费UML建模工具推荐:JUDE–community 2.免费UML建模工具推荐:UMLet 3.免费UML建模工具推荐:ArgoUML 4.免费UML建模工具推荐:BOUml 5.免费UML建模 ...

  2. Condition Variable使用及其Thread Cancellation线程取消

    条件变量Condition Variable的一般用法: 唤醒用法: struct { pthread_mutex_t mutex; pthread_cond_t cond; //whatever v ...

  3. Zookeeper 源码（七）请求处理

    Zookeeper 源码(七)请求处理 以单机启动为例讲解 Zookeeper 是如何处理请求的.先回顾一下单机时的请求处理链. // 单机包含 3 个请求链:PrepRequestProcessor ...

  4. Java Thread系列（二）线程状态

    Java Thread系列(二)线程状态 一.线程的五种状态 新建状态(New):新创建了一个线程对象,尚未启动. 就绪状态(Runnable):也叫可运行状态.线程对象创建后,其他线程调用了该对象的 ...

  5. Java程序设计11——GUI设计与事件处理B

    4 Java事件模型的流程 为了使图形界面能够接收用户的操作,必须给各个组件加上事件处理机制. 在事件处理的过程中,主要涉及3类对象: 1.Event Source(事件源):事件发生的场所,通常就是 ...

  6. StarUML 5.0问题解决：Failed to open the model file. Invalid file format.

    使用StarUML 5.0打开一个已有的文件时,如果遇到报"Failed to open the model file. Invalid file format."错误,则原因可能 ...

  7. Java学习总结——常见问题及解决方法

    CYTX项目开发中遇到的问题及解决方法 Android开发各类常见错误解决方案: 使用Android Studio遇到的问题及解决过程 登录注册部分问题及解决: 1.问题:"No targe ...

  8. Shell编程-02-Shell变量

    目录 什么是Shell变量 变量类型 环境变量初始化及其对应文件的生效顺序 什么是Shell变量     在初等数学数学方程式中,我们会经常碰到类似于这样的方程式:y=x+1 ,等号左右两边的x和y称 ...

  9. Appium之打开应用时提示框处理

    当打开一个应用时,会有一个无关紧要的提示框,如果要继续操作,需要先关闭提示框,如下图(如新用户福利提示): 此时,如果你直接用Appium inspector或者Android uiautomator ...

  10. linux数据库备份

    linux数据库备份 服务端启用二进制日志 如果日志没有启开,必须启用binlog,要重启mysql,首先,关闭mysql,打开/etc/my.cnf,加入以下几行: [mysqld] log-bin ...