jQuery之添加节点的几种方式

这篇具有很好参考价值的文章主要介绍了jQuery之添加节点的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、append()

1、基本使用

2、获取一个dom节点然后通过追加到指定元素里面,相当于把这个元素剪切,然后作为追加指定元素中的最后一个子元素

二、prepend()

三、before()

四、after()

五、appendTo()


一、append()

1、基本使用

  • 把元素追加到父元素里面,并且是最后一个
// 1、创建一个li标签
var li = $('<li>我是郑建</li>')
// 2、添加到ul中的元素后面
$('ul').append(li)

2、获取一个dom节点然后通过追加到指定元素里面,相当于把这个元素剪切,然后作为追加指定元素中的最后一个子元素

// 1、获取一个li节点
var li = $('li')
// 2、把这个li标签剪切复制到ul中作为最后一个子元素
$('ul').append(li)

二、prepend()

用法同append()文章来源地址https://www.toymoban.com/news/detail-487101.html

三、before()

  • 元素B.before(A), 就是把元素A插入到元素B前面,作为兄弟元素添加
var div1 = $('<div>我是新建的div</div>')
$('#div2').before(div1)

四、after()

  • 元素A.before(B), 就是把元素B插入到元素A后面,作为兄弟元素添加
var div1 = $('<div>我是新建的div</div>')
$('#div2').after(div1)

五、appendTo()

  • 语法:子元素.appendTo(父元素);// 把子元素作为父元素的最后一个子元素添加
var li = $('<li>我是郑建</li>')
li.appendTo($('ul'))

到了这里,关于jQuery之添加节点的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 【图论】节点的几种中心性

    【图论】节点的几种中心性

    参考资料:https://www.ultipa.cn/document/ultipa-graph-analytics-algorithms/degree/v4.0 本文主要内容是介绍图分析相关的概念与算法 概述 节点度算法为每个节点计算与其相连的边的数量;当边上有权重时,则计算权重的总和。节点度是面向节点的浅层(≤ 1层)计算,是一种最简单、最高效

    2024年02月04日
    浏览(9)
  • 以太坊的节点分类及Geth的几种同步模式

    以太坊数据同步是以节点(peer)作为数据载体存放和传输主要以Header,Body,Reciept组成的数据主体,通过以太坊p2p通信协议管理数据同步事务,最后交给执行器(主动同步会交给Downloader,被动同步会交给Fetcher)执行最后的数据下载任务。 以太坊节点主要有四种类型,分别是

    2023年04月20日
    浏览(13)
  • Python脚本添加参数的几种方法

    Python脚本添加参数的几种方法

    用python添加参数都是用的input函数,不能添加默认值也不能输入help提示。 最近发现了2个更好用的库分享给大家。 这个使用很简单,就不过多描述了。 实际调用: argparse是python自带库,不用额外安装。 这个库定义参数麻烦,使用起来简单。 在cmd里执行python脚本 输入下面语句

    2024年02月07日
    浏览(10)
  • QListWidget中添加QListWidgetItem的几种形式

    QListWidget中添加QListWidgetItem的几种形式

    本文介绍QListWidget中添加QListWidgetItem的几种形式: 第一种是直接使用 QListWidgetItem ,第二种是添加一个 widget 进去: 第三种是使用 model : 第四种实质还是添加 widget ,不过是使用 setItemWidget 添加一个自定义的 widget 。 效果图: 工程源码地址:https://gitee.com/gao-yuelong/qtdemo/tree

    2024年02月16日
    浏览(12)
  • 串口监控的几种方式

    串口监控的几种方式

    目录 方法1. 使用usb转TTL模块硬件监控; 方法2. 使用JLINK的SWD接口的串口收发脚进行硬件监控; 方法3. 使用虚拟串口进行软件监控; 方法1. 使用usb转TTL模块硬件监控; 方法2. 使用JLINK的SWD接口的串口收发脚进行硬件监控; 吃水不忘挖井人: Jlink v9虚拟串口功能,不用再单独购

    2024年02月06日
    浏览(11)
  • 创建线程的几种方式

    创建线程的几种方式

    线程和进程的区别: 进程是操作系统进行资源分配的最小单元。 线程是操作系统进行任务分配的最小单元,线程隶属于进程。 如何开启线程? 1、继承Thread类,重写run方法。 2、实现Runnable接口,实现run方法。 3、实现Callable接口,实现call方法。通过FutureTask创建一个线程,获

    2024年02月03日
    浏览(10)
  • 常见的几种排序方式

    常见的几种排序方式

    排序: 所谓排序,就是使一串记录,按照其中的某个或某些的大小,递增或递减的排列起来的操作 稳定性: 假定在待排序的记录序列中,存在多个具有相同的的记录,若经过排序,这些记录的相对次序保持不变,即在原序列中,r[i]=r[j],且r[i]在r[j]之前,而在

    2024年02月07日
    浏览(12)
  • python的几种输出方式

    python的几种输出方式

    1.输出百分比方法 2. print(f “{}”) 的用法 3. .format格式   4. 加号拼接(针对字符串) 扩展知识 -格式化输出 字符 含有 %s 字符串 %d 有符号十进制整数,%06d表示输出的整数显示位数字,不足的地方使用0补全 %f 浮点数,%.02f表示小数点后只显示两位 %% 输出%  %s:代表字符串的占

    2024年04月15日
    浏览(14)
  • redis的几种集群方式

    https://www.zhihu.com/people/pan-zhi-74-31 Redis集群介绍Redis集群一般有四种方式,分别为:主从复制、哨兵模式、Cluster以及各大厂的集群方案。在3.0版本之前只支持单实例模式,3.0之后支持了集群方式。在3.0之前各大厂为了解决单实例Redis的存储瓶颈问题各自推出了自己的集群方案,

    2024年02月05日
    浏览(14)
  • Jetpack Compose 中添加 click 事件的几种方法

    Jetpack Compose 中添加 click 事件的几种方法

    Compose 中添加 click 有多总方法,本文做一个简单总结 这是最常见也是最简单的方式,如下所示 当点击发生时,除了可以相应事假处理,也会触发水波纹(Ripple)等主题效果。 需要注意,对于 Button 类的 Composable ,不推荐使用 Modifier.clickable,应该使用其自带的 onClick 参数,虽

    2024年02月13日
    浏览(9)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包