一，创建元素节点：

　　第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. mybatis整合spring的完整过程

    1.1 整合思路 1.SqlSessionFactory对象应该放到spring容器中作为单例存在. 2.传统dao的开发方式中,应该从spring容器中获得sqlsession对象. 3.Mappe ...

  2. [转]TCP的拥塞控制

    1.引言 计算机网络中的带宽.交换结点中的缓存和处理机等,都是网络的资源.在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就会变坏.这种情况就叫做拥塞. 拥塞控制就是防止 ...

  3. K8s基于DNS的服务发现（转）

    原文地址:https://www.oschina.net/question/2657833_2201246 1.Kubernetes中如何发现服务 ◆   发现Pod提供的服务 首先使用nginx-d ...

  4. Spring3.x错误----java.lang.ClassNotFoundException：org.aopalliance.inter.MethodInterceptor

    Spring3.x错误: 解决方法: 发现MethodInterceptor确实不存在,发现少了个jar包,aopalliance-1.0.jar 参考: http://blog.csdn.net/s ...

  5. Java® Language Specification

    Java™ Platform, Standard Edition 8 API Specification http://docs.oracle.com/javase/8/docs/api/ The J ...

  6. swift po 实现动态按钮2

    // //  ButtonViewController.swift //  PopInstall // //  Created by su on 15/12/11. //  Copyright © 2 ...

  7. ZSTU4266 回文 2017-03-22 14:25 55人阅读 评论(0) 收藏

    4266: 回文 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 1636  Solved: 504 Description 小王想知道一个字符串是否为 ...

  8. java并发编程实战：第五章----基础构建模块

    委托是创建线程安全类的一个最有效的策略:只需让现有的线程安全类管理所有的状态即可. 一.同步容器类 1.同步容器类的问题 同步容器类都是线程安全的,容器本身内置的复合操作能够保证原子性,但是当在其上进 ...

  9. linux下的文本操作之 文本查找——grep

    摘要:你有没有这样的应用场景:调试一个程序,出现debug的提示信息,现在你需要定位是哪个文件包含了这个debug信息,也就是说,你需要在一个目录下的多个文件(可能包含子目录)中查找某个字符串的位置: ...

  10. cron和crontab

    crontab -l 列出目前的计划任务(时程表) crontab -e 编辑计划任务   计划任务的格式如下: f1 f2 f3 f4 f5 program 其中 f1 是表示分钟,f2 表示小时, ...