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. python selenium-webdriver 定位frame中的元素 （十三）

    定位元素时经常会出现定位不到元素,这时候我们需要观察标签的上下文,一般情况下这些定位不到的元素存放在了frame或者放到窗口了,只要我们切入进去就可以很容易定位到元素. 处理frame时主要使用到sw ...

  2. 解决jenkins git timeout的问题

    进入项目配置(project configure) "源码管理"选项卡中,找到Additional Behaviours点击旁边的 add   image.png 点击advanc ...

  3. jdk1.8源码解析（1）：HashMap源码解析

    jdk1.8 HashMap数据结构 图1-HashMap类图 图2-TreeNode类图 由图1-HashMap类图可知HashMap底层数据结构是由一个Node<K,V>的数组构成.具 ...

  4. sort简单用法

    -u 去重## 查看文件内容cat test_sort.txt ## sort -u 去重cat test_sort.txt |sort -u----------------------------- ...

  5. 【Algorithm】字符串编辑距离（Levenshtein距离）C++算法实现

    算法实现比较简单,但算法原理不明白,有空了再研究一下. unsigned LevenshteinDistance(const string& s1, const string& s2) ...

  6. CentOS7(64) yum安装、配置PostgreSQL 11

    一.安装postgresql11 1.Install the repository RPM: 添加RPM yum install https://download.postgresql.org/pub ...

  7. c# 简单方便的连接oracle方式

    通过nuget安装ManagedDataAccess (自动生成的config里面的配置都可以删掉) winform程序,拖出一个datagridview和button using Oracle.Ma ...

  8. IoC容器的接口设计

    1.从接口BeanFactory---HierarchicalBeanFactory---ConfigurableBeanFactory,是一条主要的BeanFactory设计路径. 2.第二条接口设 ...

  9. Qt之QTreeWidget入门

    QTreeWidget的一些基本操作 1.insertTopLevelItems,insertTopLevelItem用来添加顶层的item QTreeWidget *treeWidget = new ...

  10. Java 工程师成神之路 | 2019正式版

    本文为转载,原文见以下链接:https://mp.weixin.qq.com/s/4AMzq87V6eW3YPgE0mCdSw 1 基础篇 01 面向对象 → 什么是面向对象 面向对象.面向过程 面向 ...