一，创建元素节点：

　　第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. Halcon中xld的常见特征的含义总结

    如下图:

  2. ThinkCMF 增加 区域（省、市、区）管理模块

    区域管理模块是系统最常使用的一个模块. 可以直接在系统后台管理,前.后台调用. 调用方式: 区域模块使用说明: 1.将目录下的sp_region.sql导入数据库(如果数据库表前缀不是“sp_”,修改 ...

  3. Oracle GoldenGate 四、数据过滤和数据项匹配

    写在开始前 从两周前我花了大量的业余时间阅读GoldenGate官方文档,并根据文档实践和进一步学习了解GoldenGate,以下便是根据官方文档理解总结的GoldenGate学习内容: Oracle ...

  4. uva 10169 - Urn-ball Probabilities !(概率）

    题目链接:uva 10169 - Urn-ball Probabilities ! 题目大意:在一个箱子中,原本有1个红球,然后任意取出(有放回)一个球,然后再往里放一个白球(每次取都要放进一个白球) ...

  5. SQLServer中数据加密方法

    对SQLServer中的数据进行加密,有三种方法, 1.  在程序语言中先对数据进行加密后再把加密后的数据保存在SQLServer数据库中: 2.  利用SQLServer未公开的加密密码函数,在SQ ...

  6. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

  7. Azure静态公网ip自助反解

    Linux下安装az工具,并登陆 az login 执行 az network public-ip update --resource-group ip所在资源组名称 --name ip对应资源名称 ...

  8. mysql免安装版初始化

    解压之后复制my-default.ini到本地目录下的my.ini 修改key: basedir = D:\\software\mysql-5.7.12-winx64  datadir = D:\\s ...

  9. .net List方法属性及作用

    List的方法和属性 方法或属性 作用 Capacity 用于获取或设置List可容纳元素的数量.当数量超过容量时,这个值会自动增长.您可以设置这个值以减少容量,也可以调用trin()方法来减少容量以 ...

  10. .net core执行dotnet ef migrations createmodel等命令出错

    .net core执行dotnet ef migrations createmodel等命令出错 执行dotnet ef migrations createmodel.dotnet ef migrat ...