append：在元素内部的最后面添加元素,作为子元素。

prepend：在元素内部的最前面添加元素,作为子元素。

before:在元素的前边，作为兄弟元素添加。

after:在元素的后边，作为兄弟元素添加。

举个栗子：

 <body>

     <div class="div">

         <p>我是本来就存在的</p>

     </div>

     <hr />

     <div class="base">我要给我前边加一个兄弟节点</div>

 </body>

没添加元素之前效果如下：

append:被选元素的结尾插入内容

$('.div').append('<p>我是通过append添加的</p>')

结果：可以看到已经作为子元素添加到后边了。

prepend:被选元素的开头插入内容

$('.div').prepend('<p>我是通过prepend添加的</p>')

结果：可以看到已经作为子元素添加到前边了。

after:在被选元素之后插入内容

$('.base').after("<div>我是在后边添加的兄弟节点</div>")

结果：可以看到已经作为兄弟元素添加到后边了。

before:在被选元素之前插入内容

$('.base').before("<div>我是在前边添加的兄弟节点</div>")

结果：可以看到已经作为兄弟元素添加到前边了。

jquery中添加元素append，prepend，before和after方法的区别的更多相关文章

  1. jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery中的append()和prepend(),after()和before()的差别

    jQuery中的append()和preappend(),after()和before()的差别 append()和prepend() 如果 <div class='a'> //<- ...

  3. jquery中关于append()的用法笔记---append()节点移动与复制之说

    jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...

  4. jquery中的append功能相当于剪切的作用 将原来的元素剪切走

    jquery中的append功能相当于剪切的作用 将原来的元素剪切走

  5. JQuery中的$.getScript()、$.getJson()和$.ajax()方法

    $.getScript() 有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的.虽然可以在需要哪个JavaScript文件时,动态地创建<script>标签, ...

  6. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  7. jquery中append、prepend, before和after方法的区别（一）

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

  8. jquery中append、prepend, before和after方法的区别

    1.prepend() .append()方法在被选元素的开头/结尾插入文本/HTML: 2.before().after()方法在被选元素之前/之后插入内容: append() & prep ...

  9. jQuery - 添加元素append/prepend和after/before的区别

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

随机推荐

  1. 解决解决httpd: Could not reliably determine the server's fully qualified domain name

    vi /etc/httpd/conf/httpd.conf   加入一句  ServerName  localhost:80 参考:https://www.cnblogs.com/52linux/ar ...

  2. myEclipse+Spring boot+Hbuilder+jwt Token+mongoDB+企业微信H5开发

    企业微信应用的H5开发 1.参考文档:weUI:http://jqweui.com/ 2.企业微信接口文档:https://work.weixin.qq.com/api/doc#10029 3.百度地 ...

  3. Dubbo-Admin 2.6.0使用

    一.下载源码 下载2.6.0的源码 https://github.com/apache/incubator-dubbo/releases/tag/dubbo-2.6.0 二.使用Eclipse打开du ...

  4. asp.net mvc各种传值方式大全

    MVC 各种传值方式 ViewData传值. HomeController.cs Co de: public ActionResult Index(){       ViewData["Ti ...

  5. SoapUI接口测试-验签值处理-调用java的加密jar包

    转载自:https://www.jianshu.com/p/7c672426a165 一. 背景: 调用接口时有个请求参数是对请求入参按一定规则进行加密生成的验签值,每次不同参数的请求生成唯一的验签值 ...

  6. JetBrains GoLand 注册码

    选择license server 输入 http://idea.youbbs.org 完成 要求联网

  7. 编辑器-vim

    编辑器之神-vim vi简介 vi是“Visual interface”的简称,它在Linux上的地位就仿佛Edit程序在DOS上一样.它可以执行输出.删除.查找.替换.块操作等众多文本操作,而且用户 ...

  8. Java8-Optional与null

    对null进行处理 程序中经常需要对null情况进行处理,比如Course类中有一个List stuList属性,Student有一个name属性. 现在想要查看某个student的name属性的长度 ...

  9. InnoDB 存储引擎的特点及优化方法

    InnoDB:   InnoDB 引擎是MySQL数据库的另一个重要的存储引擎.被包含在所有的二进制安装包里面.和其它的存储引擎相比.InnoDB引擎的优点是支持兼容ACID的事物.以及参数完整性(有 ...

  10. 报错：Flink Could not resolve substitution to a value: ${akka.stream.materializer}

    报错现象: Exception in thread "main" com.typesafe.config.ConfigException$UnresolvedSubstitutio ...