JQuery添加元素

最近又被项目缠身。。。记一下遇到的小事

JQuery添加元素

之前只知道 append() 添加元素,但好像只能添加在内部,今天遇上了总结一下。

(append,prepend,after,before四种方法区别对比)

jquery添加元素一共有四个语句,分别是 append()prepend()after()before()

  • append的用法
    意思是在选中目标的结尾插入内容。举个例子:
<p>hello</p>

进行append操作

$("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>    //结果

增加元素的几个方法知道了,那关于删除的呢?( empty()remove()

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2017-09-16摘抄自W3school-jQuery - 添加元素希望帮助自己系统地打好基础,也能在做笔记的同...
    moralok阅读 3,328评论 0 2
  • 1.添加新的 HTML 内容 append/prepend 是在选择元素内部嵌入。 after/before 是在...
    WANG_M阅读 3,101评论 0 1
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,851评论 0 44
  • 不要再搞混了!!!!接下来的例子以这个代码为基础 1.append的用法 选中目标的里面的后面插入内容 2.pre...
    AMONTOP阅读 4,288评论 0 1
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 4,626评论 0 9