一，创建元素节点：

　　第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. Linux命令：cp (copy)复制文件或目录

    复制文件,只有源文件较目的文件的修改时间新时,才复制文件     cp -u -v file1 file2 .将文件file1复制成文件file2     cp file1 file2 .采用交互方式 ...

  2. 第四章 Windows的图形设备接口及Windows绘图 P83 4-6

    实验(实习)名称  图形程序设计及其应用  实验(实习)日期 一.实验目的 1．熟悉图形设备接口的概念及其应用. 二.实验内容及步骤  实验任务 1.熟悉基于图形应用的程序设计: 2.掌握刷新技术及其 ...

  3. live kalilinux能保存文件和设置

    win32diskimager写入kalilinux镜像,建议用parrot sec os gparted /dev/sdb,新建分区sdb3,Lable输入persistence 挂载/dev/sd ...

  4. （最短路 SPFA）Currency Exchange -- poj -- 1860

    链接: http://poj.org/problem?id=1860 Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 2326 ...

  5. ------------------java collection 集合学习 ----小白学习笔记，，有错，请指出谢谢

    <!doctype html>java对象集合学习记录 figure:first-child { margin-top: -20px; } #write ol, #write ul { p ...

  6. [转载]MVC、MVP以及Model2(上)

    对于大部分面向最终用户的应用来说,它们都需要具有一个可视化的UI与用户进行交互,我们将这个UI称为视图(View).在早期,我们倾向于将所有与视图相关的逻辑糅合在一起,这些逻辑包括数据的呈现.用户操作 ...

  7. csv文件乱码

    问题描述: 生成的csv文件,设置为UTF-8格式,在windows上用EXCEL打开的话会乱码,在linux上用vim或者cat打开查看正常:设置为GBK格式的话,在windows上用EXCEL打开 ...

  8. 使用centos官方镜像制作jdk8环境镜像

    首先将jdk文件或者tar包放在/var/local路径下 然后Dockerfile中写 # 以 centos7 为基础镜像 FROM centos:latest MAINTAINER chen # ...

  9. sqlcmd 执行SQL语句或没有足够的内存来执行脚本

    win+r命令提示框里面输入cmd sqlcmd -S . -U username -P password -d database -i url -S 数据库地址 -U 登录名称 -P 密码 -d 数 ...

  10. 自己从0开始学习Unity的笔记 VIII （C#中类继承练习 II）

    自己写了一个关于兵种的,因为一直在测试,到底面向对象是个什么玩意...然后就做了这个 namespace 兵种 { class Role //作为父类,构建一个普通角色属性用于继承 { protect ...