【笔记】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 ...
随机推荐
- 【Go语言】LiteIDE使用的个人使用方法
Go语言开发 可以使用的IDE很多 (Goclipse,sublime,notepad++,vim等)目前使用的最顺手的就是LiteIDE了 但是尽管这样,一开始使用LiteIDE也有很多不习惯的地方 ...
- Linux_几个符号命令
一.管道符号 | (将前面命令的输出结果传给后面的命令) [eRrsr@hadoop09-linux ~]$ cat /etc/passwd | grep "^root" root ...
- CCS样式表
一.css样式表 1.样式表分类 1.内联式 <p style="font-size:18px;">This is an apple</p> 2.内嵌样式表 ...
- java输入一个字符串,打印出该字符串中字符的所有排列,随机打乱排序
import java.util.ArrayList;import java.util.Collections;import java.util.List; public class Test7{ ...
- createElement,createTextNode,appendChild
<html> <head> <meta charset="UTF-8"> <title></title> <scr ...
- toLowerCase和toLocaleLowerCase的区别
ECMAScript中涉及字符串大小写转换的方法有4个:toLowerCase().toLocaleLowerCase().toUpperCase()和toLocaleUpperCase().其中,t ...
- make:cc 命令未找到的解决方法
安装redis时遇到的问题 make:cc 命令未找到的解决方法 没安装gcc,然后安装 yum install gcc yum install gcc-c++
- [NoSQL]验证redis的主从复制
安装配置redis http://www.cnblogs.com/myrunning/p/4222385.html 1.1查看当前redis文件 1.2修改配置文件 拷贝配置文件分别为redis_m ...
- Java面试题大全(四)
JAVA代码查错 1. abstract class Name { private String name; public abstract boolean isStupidName(String n ...
- 使用JSch实现SFTP文件传输
1.JSch开发包下载 http://www.jcraft.com/jsch/ 目前最新版本为: jsch - 0.1.51 2.简单例子,列出指定目录下的文件列表 import java.util ...