当前位置: 首页 > news >正文

Jquery添加元素(append,prepend,after,before四种方法区别对比)

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

jquery是一个平常比较喜欢用的js框架,因为上手比较简单吧,哈哈,下面呢,就介绍一下Jquery中如何添加元素。jquery添加元素一共有四个语句,分别是append(),prepend(),after(),before()

    append的用法
    这个方法的意思是在选中目标的结尾插入内容。举个例子:

<p>hello</p>

如果执行下面这个插入语句,上面的语句会变成什么样子

$("p").append("<b>world</b>")

执行了这个插入语句会变成

<p>hello<b>world</b></p>

也就是说,在插入的结尾标签前插入此内容。

    prepend的用法。
    顾名思义,跟上面一种用法相反,就是在标签开始的地方插入内容。
    还是以上面第一段代码为例子。

$("p").prepend("<b>world</b>")//插入语句

<p><b>world</b>hello</p>//结果

    after的用法
    这个语句的用法就是在被选元素之后插入内容。
    同样以上面的为例子。

$("p").after("<b>world</b>")//插入语句

<p>hello</p><b>world</b>//结果

在选中标签后面插入内容

    before的用法
    跟after相反,在标签前面插入内容

$("p").before("<b>world</b>")//插入语句

<b>world</b><p>hello</p>//结果
 

转载于:https://my.oschina.net/cng1985/blog/2874118

相关文章:

  • 面向对象类的解析
  • 关于Android全面屏虚拟导航栏的适配总结
  • 89元尝鲜智能家居 天猫精灵方糖智联3件套简评
  • Redis命令——哈希(Hash)
  • Material Design 设计规范总结(1)
  • Git内部原理之Git引用
  • 9号团队第一次会议
  • 数据科学 第 3 章 11 字符串处理
  • Elasticsearch 优化
  • 深入理解多线程(三)—— Java的对象头
  • 内存池原理大揭秘
  • Python3爬取英雄联盟英雄皮肤大图
  • (6)添加vue-cookie
  • win10下配置java jdk jre环境变量
  • 如何写一个日志采集工具
  • [nginx文档翻译系列] 控制nginx
  • extract-text-webpack-plugin用法
  • javascript数组去重/查找/插入/删除
  • JavaScript新鲜事·第5期
  • js对象的深浅拷贝
  • Linux链接文件
  • storm drpc实例
  • Tornado学习笔记(1)
  • Vue.js源码(2):初探List Rendering
  • 关于springcloud Gateway中的限流
  • 解析 Webpack中import、require、按需加载的执行过程
  • 如何打造100亿SDK累计覆盖量的大数据系统
  • 收藏好这篇,别再只说“数据劫持”了
  • 思否第一天
  • 探索 JS 中的模块化
  • 通过几道题目学习二叉搜索树
  • 微信支付JSAPI,实测!终极方案
  • kubernetes资源对象--ingress
  • 策略 : 一文教你成为人工智能(AI)领域专家
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • #Linux(make工具和makefile文件以及makefile语法)
  • #Linux(帮助手册)
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • (windows2012共享文件夹和防火墙设置
  • (八)c52学习之旅-中断实验
  • (一)Linux+Windows下安装ffmpeg
  • (转)Unity3DUnity3D在android下调试
  • (转)创业家杂志:UCWEB天使第一步
  • ***原理与防范
  • .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets?
  • .Net 6.0 处理跨域的方式
  • .net Application的目录
  • .NET Core IdentityServer4实战-开篇介绍与规划
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .NET 常见的偏门问题
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题
  • .NET框架
  • .Net中的设计模式——Factory Method模式
  • 。Net下Windows服务程序开发疑惑