【笔记】jquery append,appendTo,prepend,prependTo 介绍

在jquery权威指南里面学习到这一章,很有必要介绍一下里面的内容:
首先是append(content)这个函数:
意思是将内容content加入到所选择的对象内容的后面
例如:$("div").append("<p>" + hello + "</p>");
意为在所有div元素里面添加一个p标签,标签内容为hello,如果div元素里面有其他的内容则在原来的内容后面添加新的内容
然后是appendTo(content)这个函数:
由To这个单词我们便可得知这个函数的意思就是将什么加到什么中所以它和append()函数最大的区别就是:
内容和选择器的位置,以及 append() 能够使用函数来附加内容。而他们执行的任务都是一样的
就如上面的例子:
$("div").append("<p>" + hello + "</p>");将p标签加入到页面所有div中
如果用appendTo就应该这样写:
$("<p>" + hello + "</p>").appendTo("div")
append还有另外一个形态
append(function(index,html){})
用法和原来的append是一样的执行的任务也是一样,但是function里面的index和html不要理所当然的以为是在第index个div下插入html内容,其实这两个参数只是用来返回当前对象的索引值以及原始的内容
jquery代码
$(function() {
$("div").append(function(n,m){
return "hello" + "索引值:" + n + "原始内容:" + m;
});
})
html代码
<p>hello</p>
<div>jQuery 1</div>
<div>jQuery 2</div>
<div>jQuery 3</div>
<div>jQuery 4</div>
浏览器结果:

而prepend和prependTo的的用法和append,appendTo的用法是一样的,只不过prepend和prependTo是在选中的对象内容的前面添加新内容
【笔记】jquery append,appendTo,prepend,prependTo 介绍的更多相关文章
- jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别
jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...
- jquery append、prepend、before等等
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...
- 关于append,appendTo,prepend,prependTo的区别
之前做项目对于这几个的方法总是有点模糊,尤其是prepend和prependTo; 1.append <style> span{ background:yellow; } .test{ b ...
- after()和append()的区别、before()和prepend()区别、appendTo()和prependTo()、insertAfter()和insertBefore()
一.after()和before()方法的区别 after()——其方法是将方法里面的参数添加到jquery对象后面去: 如:A.after(B)的意思是将B放到A后面去: before( ...
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...
- jquery:after append appendTo三个函数的区别
1.查找元素节点 var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 2.查找元素属性 利用jq ...
- jQuery 文档操作 - prependTo() ,appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- jQuery 追加元素的方法如append、prepend、before,after(转)
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...
- jquery中append跟prepend的用法
jquery中append和prepend的用法 append 是插入到元素中,并放到元素内的最后面prepend 是插入到元素中,并放到元素内的最前面例$("body"). ...
- jQuery 追加元素的方法如append、prepend、before
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...
随机推荐
- MongoDB的数据库基本操作(二)
创建数据库 >use mydb switched to db mydb 查看所有的数据表 >show collections system.indexes 创建数据表 >db.c ...
- Java面向对象编程
面向对象的软件开发: 面向对象的开发把软件系统看成各种对象的集合,对象就是最小的子系统,一组相关的对象能够组合成复杂的子系统. 面向对象的开发方法具有以下优点: 1.把软件系统看成是各种对象的集合,更 ...
- Python 3.x下消除print()自动换行
Python 2.x下的print语句在输出字符串之后会默认换行,如果不希望换行,只要在语句最后加一个“,”即可.但是在Python 3.x下,print()变成内置函数,加“,”的老方法就行不通了. ...
- Odoo 9 Odoo $ JQuery undifned
浏览器处于假死状态,查看console发现 odoo,jquery,$ 未定义三处错误,后台显示IOError: IOError: [Errno 2] No such file or director ...
- c++ basic 整理1
//c++类 初始化 与 初始赋值 //C++规定 对象的 成员变量 初始化 动作发生 在进入 构造函数本体 之前 . 在构造函数内 成员变量赋值都属于 赋值 . class People { pub ...
- DEDECMS里面DEDE函数解析
下面来解说下DEDECMS织梦CMS模板里面的函数说明 在文件include/inc_function.php里面 GetCurUrl() 获贴切前的脚本的URL GetAlabNum($str) 把 ...
- # 20145334赵文豪 《Java程序设计》第7周学习总结
20145334赵文豪 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1时间的度量 1.格林威治时间(GMT):参考太阳到达最高点,有时间误差. 2 ...
- IOS第一天多线程-03线程间通信
**** #import "HMViewController.h" @interface HMViewController () @property (weak, nonatomi ...
- css:使用笔记(不断更新中...)
1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高 但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置 ...
- php Output Control 函数 ob_系列函数详解
<?php /* * 输出缓冲控制 * * flush — 刷新输出缓冲 ob_clean — 清空(擦掉)输出缓冲区 ob_end_clean — 清空(擦除)缓冲区并关闭输出缓冲 ob_en ...