0

0

jQuery实现节点的追加、替换、删除、复制功能详解

小云云

小云云

发布时间:2018-01-01 10:54:04

|

1936人浏览过

|

来源于php中文网

原创

本文主要介绍了jquery实现节点的追加、替换、删除、复制功能,结合具体实例形式分析了jquery针对dom节点的操作技巧,涉及append()、prepend()、replaceall()、replacewith()empty()、remove()、clone()、clone()等方法的使用技巧,需要的朋友可以参考下,希望能帮助到大家。

本文实例讲述了jQuery实现节点的追加、替换、删除、复制功能。分享给大家供大家参考,具体如下:

一、追加节点分为父子和兄弟节点的追加。每个追加节点的方法又分主动追加和被动追加。


//1、父子关系的添加
//主动添加
$('#shu').append('
  • 关羽
  • ');//往后添加 $('#shu').prepend('
  • 黄忠
  • ');//往前添加 //被动添加 $('
  • 黄盖
  • ').appendTo($('#wu')); $('
  • 陆逊
  • ').prependTo($('#wu')); //添加已存节点,发生位置改变 $('#shu').prepend($('#wu li:eq(1)')); //2、兄弟关系的添加.after .before .insertAfter .insertBefore //主动 $('#liu').after('
  • 赵云
  • '); $('#liu').before('
  • 诸葛亮
  • '); //被动 $('
  • 黄月英
  • ').insertAfter($('#liu')); $('
  • 孙尚香
  • ').insertBefore($('#liu'));

    二、替换节点.replaceAll   .replaceWith


    //replaceAll主动替换
    $('#wu').replaceAll($('#shu'));
    //replaceWith被动替换
    $('#yu').replaceWith('
  • 黄盖
  • ');

    三、删除节点.empty()  .remove()


    $('#wu').empty(); //清空对应的子节点
    $('#fei').remove(); //删除匹配到的节点

    四、复制节点 .clone(true)  .clone(false)

    参数为true,节点和其身上的事件都给复制
    参数为false,只复制节点本身(包括内部的信息)

    Fireflies.ai
    Fireflies.ai

    自动化会议记录和笔记工具,可以帮助你的团队记录、转录、搜索和分析语音对话。

    下载
    $('#fei').clone(false); //只复制节点本身
    $('#fei').clone(true); //复制节点和事件

    相关推荐:

    浅谈事件冒泡、事件委托、jQuery元素节点操作

    zTree异步加载展开第一级节点方法实现

    实例分享JQuery 选择器、DOM节点操作练习

    相关专题

    更多
    jquery插件有哪些
    jquery插件有哪些

    jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

    150

    2023.09.12

    jquery怎么操作json
    jquery怎么操作json

    操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

    306

    2023.10.13

    jquery删除元素的方法
    jquery删除元素的方法

    jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

    390

    2023.11.10

    jQuery hover()方法的使用
    jQuery hover()方法的使用

    hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

    490

    2023.12.04

    jquery实现分页方法
    jquery实现分页方法

    在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

    177

    2023.12.06

    jquery中隐藏元素是什么
    jquery中隐藏元素是什么

    jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    115

    2024.02.23

    jquery中什么是高亮显示
    jquery中什么是高亮显示

    jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    170

    2024.02.23

    append用法
    append用法

    append是一个常用的命令行工具,用于将一个文件的内容追加到另一个文件的末尾。想了解更多append用法相关内容,可以阅读本专题下面的文章。

    336

    2023.10.25

    桌面文件位置介绍
    桌面文件位置介绍

    本专题整合了桌面文件相关教程,阅读专题下面的文章了解更多内容。

    0

    2025.12.30

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery 教程
    jQuery 教程

    共42课时 | 3.5万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.2万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号