一、复制节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $("div").click(function(){
        alert("fasdf")
    })
    $('body').append($('div').clone(true)); //复制一个节点添加到HTML 中

});
</script>
</head>
<body>
    <div>几点</div>
</body>

　　clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上true参数的话，这个元素附带的事件处理行为也复制出来。

二、删除节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $('div').remove(); //直接删除div 元素
});
</script>
</head>
<body>
    <div>几点</div>
</body>

　　.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的，比如：$('div').remove('#box');只删除id=box 的div。

　　.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $("div").click(function(){
        alert("fasdf")
    });
    //$('div').remove().appendTo('body'); //直接删除div 元素后再添加回去不保留事件
    $('div').detach().appendTo('body');//直接删除div 元素后再添加回去保留事件
});
</script>
</head>
<body>
    <div>几点</div>
</body>

三、清空节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $('div').empty(); //删除掉节点里的内容
});
</script>
</head>
<body>
    <div>几点</div>
</body>

四、替换节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $('div').replaceWith('<span>节点</span>'); //将div 替换成span 元素
    //$('<span>节点</span>').replaceAll('div'); //同上
});
</script>
</head>
<body>
    <div>几点</div>
</body>

　　节点被替换后，所包含的事件行为就全部消失了。

JQuery_DOM 节点操作之复制、替换和 删除节点的更多相关文章

  1. jquery插入,复制、替换和删除节点

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. python3.4学习笔记(十五) 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）

    python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...

  3. 转 Python 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）

    转自: http://www.cnblogs.com/huangcong/archive/2011/08/29/2158268.html 黄聪:Python 字符串操作(string替换.删除.截取. ...

  4. neo4j 将一个节点的属性复制到另一个节点上

    在使用Python操作Neo4j数据库的时候,经常会遇到重复的节点,需要将一个节点的属性复制到另一个节点,之后将该节点删除. def copy_node_properties(source_node_ ...

  5. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  6. JavaScript之节点的创建、替换、删除、插入

    1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...

  7. jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

    样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...

  8. redis 集群新增节点，slots槽分配，删除节点， [ERR] Calling MIGRATE ERR Syntax error, try CLIENT (LIST | KILL | GET...

    redis reshard 重新分槽(slots) https://github.com/antirez/redis/issues/5029 redis 官方已确认该bug redis 集群重新(re ...

  9. Python 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）

    去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...

随机推荐

  1. Python中递归的最大次数

    实际应用中遇到了一个python递归调用的问题,报错如下: RuntimeError: maximum recursion depth exceeded while calling a Python ...

  2. Generate Ubuntu Install Media On Mac

    Opps, my computer system was broken again... Let's repire it. Introduction The system of my PC is br ...

  3. mbed学习之Digital IO (一)

    mbed的IO操作非常灵活,常见的关于Digital IO操作整理如下表 ,其中蓝色字体是构造函数,绿色字体的是操作符重载,使用时只要创建对象,就可以调用对应的方法来操作,并且每种都提供了操作符重载, ...

  4. Ideas about the future of management

    1. Business markets a. greater competition among companies b. increase in power of global companies ...

  5. CSS之float样式总结

    从四大开始开始慢慢接触前端,大概半年多过去了,虽然做了一些东西,但感觉有些点始终不是很清晰.有时候为了赶进度,没有太多时间对某个点进行全面深入思考分析,只能从网上搜一搜,试一试,只要效果出来了,任务就 ...

  6. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  7. mysql 5.6 online ddl

    innodb存储引擎实现online ddl的原理是在执行创建或删除操作的同时,将DML操作日志写入到一个缓存中,待完成索引创建后再重做应用到表上,以此达到数据的一致性,这个缓存大小由参数innodb ...

  8. web项目开发规范整理总结

    一.类.函数.变量名命名: 1.定义类时,全部拼音的首字母必须大写:如Person,ClassDemo:(帕斯卡命名法):也可以用带下斜杆的匈牙利命名法进行命名,如    head_navigatio ...

  9. js函数的传参是按值传对递

    根据js高级程序设计第三版编写,对于函数的参数只能按值传递是这样解释的: ECMAScript 中所有函数的参数都是按值传递的.也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另 ...

  10. 个人作业-Week3

    个人作业-Week3 1. 软件工程师的成长 同学们在上这门课的时候,还是大三,你的困难和迷茫,别人一定有过.请看看别人怎么学习的,有些是科班,有些是野路子,有些成功,有些失败. 请读完下面所有博客( ...