一,创建元素节点:

  第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. MYISM表并发写请求过多 导致无法被读取解决方案

    MyISAM锁调度是如何实现的呢,这也是一个很关键的问题.例如,当一个进程请求某个MyISAM表的读锁,同时另一个进程也请求同一表的写锁,此时MySQL将会如优先处理进程呢?通过研究表明,写进程将先获 ...

  2. SFTP 安装与配置

    SFTP 安装与配置 sftp 是 Secure File Transfer Protocol 的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.SFTP 为 SSH 的一部分,由于这种 ...

  3. Monokai风格的EditPlus配色方案

    EditPlus的配置文件editplus_u.ini,该文件默认在:系统盘:\Users\用户名\AppData\Roaming\EditPlus目录中.将其中的内容替换为如下即可: [Option ...

  4. word 2007 写CSDN博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  5. 在盒子(2CCC)的日子

    在盒子(2CCC)的日子 DELPHIER的足迹印在DFW,印在2CCC.曾经的DFW和2CCC,学术气氛非常浓烈.有人提问,众人纷纷热心解答,仿佛是在解答自己难题.大家只为技术争的面红耳赤.很怀念当 ...

  6. .NET Core2使用Azure云上的Iot-Hub服务

    基于工业4.0大背景下的工业物联网是近几年内热门的话题,依靠信息化技术企业可以实现数字化转型,生产可以实现智能化制造,设备可以实现自动化运作.然而,海量的数据采集是整个建设过程的基础环节,如何处理与利 ...

  7. 国际时区 TimeZone ID列表

    public static void main(String[] args) { Calendar c = new GregorianCalendar(); c.setTime(new Date()) ...

  8. struts2获取request、session、application的四种方式

    struts2获取request.session.application的四种方式 //获取map类型的request.session.application public class LoginAc ...

  9. Linux Guard Service - 进程分裂与脱离

    进程分裂更名 void set_ps_name(char *name) { prctl(PR_SET_NAME, name); } 修改进程长名称 备份进程环境变量空间 for (i = 1; i & ...

  10. Centos7下修复 视频播放器(先 安装VLC视频播放器)

    用最新的CentOS7发现没有视频播放器,于是在http://pkgs.org/上查找,发现了nux dextop仓库上有, 于是到他的官网上http://li.nux.ro/repos.html查了 ...