【笔记】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 ...
随机推荐
- ado.net 实体类_数据访问类
实体类: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...
- ubuntu 安装 GCC
网上查了好多方式,试了一下,最简单可行的是: sudo apt-get install build-essential 等待执行完,输入 gcc -v 输出: Using built-in spec ...
- sbt %%
在依赖库选项中会看到其中有的是 %%,而有的是一个%. 这表示 :“要求sbt寻找用当前你配置的scala版本编译出来的jar包.” 因为scala不同版本编译出来的结果会不兼容.
- mvn install
mvn install:install-file \ -DgroupId=com.weibo.datasys.weistreamng \ -DartifactId=weistreamng-092-fr ...
- cookie&&session再理解笔记
就拿php来说,两个php页面之间不拿get,post传递变量的话,数据是不能共享的.访问完1.php页面该页面的变量就被销毁了.所以就拿学校食堂来说,拿现金买饭的话你交完钱后,他给你个票以便确认你, ...
- js 字符串拼接
正常来说已经使用es6 的 模板了如`` //页面层 layer.open({ type: 1, content:`<div class="child_card"> & ...
- sqlplus 初始化文件(每一次打开sqlplus不用重新设置 linesize 和 pagesize)
初始化文件目录 D:\oracle\product\11.2.0\dbhome_1\sqlplus\admin\glogin.sql 用记事本打开,添加 --SET linesize 150SET ...
- angular+ckeditor最后上传的最后一张图片不会被添加(bug)
做法一: angularJs+ckeditor 一.页面 <textarea ckeditor required name="topicContent" ng-model=& ...
- thinkphp3.2整合phpexcel
由于thinkphp3.2使用命名空间,而 PHPExcel没有使用,那么两者整合的最重要问题就是如何导入的问题. 一.PHPExcel.php和PHPExcel文件夹都放在ThinkPHP/Libr ...
- python中raw_input输入数字问题
如果按照下面方式,则无论你输入什么,都会打印12,因为raw_input接受的输入是按照字符串处理的 num = raw_input('please enter a num:') if num > ...