之前做项目对于这几个的方法总是有点模糊,尤其是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. django drf安装和doc生成

    1.打开drf官网https://www.django-rest-framework.org/,把相关的包pip install 2.INSTALLED_APPS添加drf 3.url配置 4.tes ...

  2. BZOJ 1562 [NOI2009] 变换序列

    [NOI2009] 变换序列 [题解] 就是有一个序列,每个位置可以填两个数,不可重复,问最小字典序. 显然,可以建一个二分图,判合法就是找完美匹配. 那怎么弄最小字典序呢?有好多种解法,我这里给出了 ...

  3. Delphi编程中使用回车键不换行处理方法!!

    我以前遇到过Delphi编程中使用回车键不换行的问题,一直没有找到正确处理方法,以至于每次都重新安装Delphi,今天在XE8中再次遇到这样问题,万幸找到了正确的解决方法: 可能使用过程中不小心按了i ...

  4. 使用Python+OpenCV进行图像模板匹配(Match Template)

    2017年9月22日 BY 蓝鲸 LEAVE A COMMENT 本篇文章介绍使用Python和OpenCV对图像进行模板匹配和识别.模板匹配是在图像中寻找和识别模板的一种简单的方法.以下是具体的步骤 ...

  5. windbg 常用命令详解

    = kd> ln 8046e100 (8046e100) nt!KeServiceDescriptorTableShadow | (8046e140) nt!MmSectionExtendRes ...

  6. [转]解读Unity中的CG编写Shader系列8——多光源漫反射

    前文中完成最简单的漫反射shader只是单个光源下的漫反射,而往往场景中不仅仅只有一个光源,那么多个光源的情况下我们的物体表面的漫反射强度如何叠加在一起呢?前文打的tag "LightMod ...

  7. Sublime Text3 最新版3207 安装及破解

    注:原文地址 https://www.abbeyok.com/archives/337 Sublime Text 3最近更新了新版本,最新版本:3207,之前的license无效了,新版破解方法如下: ...

  8. 浅析通过"监控"来辅助进行漏洞挖掘

    这篇文章总结了一些笔者个人在漏洞挖掘这一块的"姿势",看了下好像也没相关类似TIPs或者文章出现,就写下此文. 本文作者:Auther : vulkey@MstLab(米斯特安全攻 ...

  9. ArchLinux下十八岁的感悟

    这次不写技术文章,谈谈自己.现在我们之间没有博主和来访者的关系,我们就是简单聊聊天.你若愿意,就听我说一说. 或者你可以按下crtl+w退出该页面,博主有其他的技术文章.但我希望你能看看最好可以给我留 ...

  10. Python脚本模板

    1.Python脚本规范基础模板 #coding:utf8 import time, re, os, sys, time,urllib2,shutil,string import json,datet ...