关于append，appendTo,prepend,prependTo的区别
之前做项目对于这几个的方法总是有点模糊，尤其是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的区别的更多相关文章
- jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别
jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...
- jQuery中append()、prepend()与after()、before()的区别
转载 未曾见海 https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...
- jq中append()、prepend()、after()、before()的区别
jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...
- JavaScript 中 append()、prepend()、after()、before() 的区别
内容 append().prepend().after().before() 的区别 jQuery 操作 DOM 之添加节点 方法名 作用 $(selector).append() 指定元素内部添加, ...
- JQuery中after() append() appendTo()的区别
首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...
- jquery中append、prepend, before和after方法的区别（一）
原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...
- 比较jquery中的after(),append(),appendTo()方法
html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...
- 添加新内容的四个 jQuery 方法：append，prepend，after，before
添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...
随机推荐
- 14、Semantic-UI之菜单样式
14.1 基础菜单样式 在Semantic-UI中使用class="ui menu". 示例:定义基础菜单样式 <div class="ui menu" ...
- 加载log文件
procedure Jslog(szLogText:string);var pMyFile : TextFile;begin Assignfile(pMyFile, 'log.txt'); if Fi ...
- [LeetCode 题解]：Path Sum
前言 [LeetCode 题解]系列传送门: http://www.cnblogs.com/double-win/category/573499.html 1.题目描述 Given a bi ...
- CSS基础知识：常见选择器示例
CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现.CSS是1996年由W3C审核通过并且推荐使用的.CSS的引入,就是为了使HT ...
- 爬虫开发9.scrapy框架之递归解析和post请求
今日概要 递归爬取解析多页页面数据 scrapy核心组件工作流程 scrapy的post请求发送 今日详情 1.递归爬取解析多页页面数据 - 需求:将糗事百科所有页码的作者和段子内容数据进行爬取切持久 ...
- day04.1-三元表达式与列表解析
1. 三元表达式 name = input("请输入:") res = "英雄" if name=="令狐冲" else "伪君子 ...
- Hadoop完全分布式搭建全过程
本次操作共4台虚拟机(node211,node212,node213,node214),node211为NameNode,其余3台为DataNode,SecondaryNamenode为node212 ...
- OCP认证052新加的考试题及答案整理-21
21.Which two are true about roles? A) A role can be password-protected. B) A role can be granted to ...
- vm虚拟机安装，配置与使用
百度网盘下载地址: 链接: https://pan.baidu.com/s/1cNn458wUyKNOcAxQ8vEPQg密码: 8vrw 创建虚拟机: 1.创建一个虚拟机: 2.选择标准模式: 3. ...
- vue element-ui 表格筛选，点击筛选数据
<el-table-column prop="productEnvVersion" label="运行环境" :filters="this.ru ...