一,创建元素节点:

  第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. ubuntu开机执行指令或脚本

    vi /etc/rc.d/rc.localz 将指令添加到exit 0之前,保存.

  2. ubuntu下安装最新的nodejs

    # apt-get update # apt-get install -y python-software-properties software-properties-common # add-ap ...

  3. marioTcp

    https://github.com/nicholaszj/marioTcp MarioTCP MarioTCP 是使用libevent模型来建立的一个性能强大的TCP服务器. 1:Getting S ...

  4. 本周MySQL官方verified/open的bug列表(11月15日至11月21日)

    本周MySQL verified的bug列表(11月15日至11月21日) 1. Bug #70923    Replication failure on multi-statement INSERT ...

  5. 16 Finding a Protein Motif

    Problem To allow for the presence of its varying forms, a protein motif is represented by a shorthan ...

  6. PMP项目管理笔记

    项目管理三重制约:时间.成本.范围.结果:质量(结果质量和过程质量)四个层次:复杂事情简单化:分解简单事情量化:临界值量化的事情专业化:规律专业的事情模板化:框架模板 工作分日常运作和项目.日常运作为 ...

  7. 【转】java遍历实体类的属性和数据类型以及属性值

    和同学接了个外包的活,由于项目中很多地方要用到poi导出excel,而每次导出都要写很多相同的代码,因为poi的cell.setCellValue();每次设置的都是不同实体bean的属性值,导致代码 ...

  8. 转 org.aspectj.lang.JoinPoint-中文简要API

    AspectJ使用org.aspectj.lang.JoinPoint接口表示目标类连接点对象,如果是环绕增强时,使用org.aspectj.lang.ProceedingJoinPoint表示连接点 ...

  9. Android UI 之 ListView

    一.在代码中创建(不适用XML布局文件) 1.创建一个项目:ListViewLearn 2.修改MainActivity,继承于ListActivity 3.创建一个String数组,用来保存List ...

  10. EBS通过SQL查找所有的定时请求

    --查找所有定时请求. --也可以登录系统,在系统管理员下查找特定请求,状态设置为Scheduled进行查询SELECT DISTINCT USER_CONCURRENT_PROGRAM_NAME,B ...