之前做项目对于这几个的方法总是有点模糊,尤其是prepend和prependTo;

1.append

<style>
span{
background:yellow;
}
.test{
background:#ccc;
height:50px;
}
.test_1{
background:red;
} </style>
<body>
<div class="test"><span class="test_1">我就站在这里</span></div>
</body>
<script>
$('.test').append("<span>我是测试快</span>");
</script>

append是插入元素内部的后面

2.appendTo

$('<span>我是测试快</span>').appendTo($('.test'));

和上面产生一样的效果,就是写法换了一下

3.prepend

$('.test').prepend("<span>我是测试快</span>");

这个方法和append做对比

append是插入元素内部的后面,而prepend是插入元素内部的最前面

4.prependTo

$('<span>我是测试快</span>').prependTo($('.test'));

上面的效果和prepend中的效果一样

关于append,appendTo,prepend,prependTo的区别的更多相关文章

  1. jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

    jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...

  2. jQuery中append()、prepend()与after()、before()的区别

    转载 未曾见海  https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...

  3. jq中append()、prepend()、after()、before()的区别

    jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...

  4. JavaScript 中 append()、prepend()、after()、before() 的区别

    内容 append().prepend().after().before() 的区别 jQuery 操作 DOM 之添加节点 方法名 作用 $(selector).append() 指定元素内部添加, ...

  5. JQuery中after() append() appendTo()的区别

    首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...

  6. jquery中append、prepend, before和after方法的区别(一)

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

  7. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  8. 比较jquery中的after(),append(),appendTo()方法

    html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...

  9. 添加新内容的四个 jQuery 方法:append,prepend,after,before

    添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...

随机推荐

  1. java动态代理类

    很有意思的一个东西,在java.lang.reflect包下 示例代码 package com.guangshan.test.proxy; import java.lang.reflect.Invoc ...

  2. XE7 & FMX 那些年我们一起上过的控件:StringGrid 之(1) 自定义标题样式

    FMX下的Grid类控件似乎不太尽如人意,可能是和官方的资料没有跟得上它的发行版本有关系. 以下讨论StringGrid的列表头及对齐方式. 先上个效果图: FMX的列表头估计很多人都是用盒子上流传甚 ...

  3. Android-读取操作系统通话记录并/拨打电话/发送短信/复制号码到拨号盘

    apps目录的contacts应用(有读取通话记录功能),是访问provider目录的provider.contacts应用(有暴露通话记录),所以要阅读Android操作系统源码-->pack ...

  4. android hook getdeceiveid

    很多手机软件使用了手机绑定.QQ,微信等.如果使用了不同的设备,则需要验证码. 要用一台手机来模拟与另一台手机一样环境,估计hook 系统的相关函数可以实现. 想着应该有现成的软件的,例如 smart ...

  5. micropython esp8266 烧录

    MicroPython 介绍 MicroPython 是一个 Python 3 语言的精简.高效实现,其包括 Python 标准库的一小部分,并经过优化,可以运行在微控制器和受限环境中运行. Micr ...

  6. OLEDB导入导出Excel

    using System;using System.Collections.Generic;using System.Data;using System.Data.OleDb;using System ...

  7. FTP ftp部署遇到问题

    FTP  ftp部署遇到问题 一. 二.

  8. “全栈2019”Java第七十章:静态内部类详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. luoguP3359 改造异或树

    https://www.luogu.org/problemnew/show/P3359 因为 a ^ b ^ b = a,所以我们预处理 1 到所有点的距离,将删边的操作反过来变成加边,对于每一个联通 ...

  10. shell 中 exit0 exit1 的区别

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: exit 0 可以告知你的程序的使用者:你的程序是正常结束的.如果 exit 非 0 值,那么你的程序的使用者通常会 ...