- 1、本文档共4页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
jquery html移动,复制,替换函数(append,clone,replaceWith等)
张映 发表于 2011-01-24
分类目录:?js/jquery
在做web前端的时候,我们经常会做一个特效,这个时候用到ajax来进行无刷新页面,来改变页面的内容,这个时候,我们就会对页面中的html进行添加,替换等,在接触jquery的这些html操作函数之前,我一般都是用js来完成的。个人觉得最快最方便的做法就是document.getElementById,document.getElementsByName这些方法,例如document.getElementById(id).html=strongaaa/strong;这种方法有一点不好,就是你必须知道,有一个id或者是name,并且写法也比较长。反正看个人喜好吧。
一,测试文件test.html
查看复制打印?
HTML??
head??
meta?http-equiv=Content-Type?content=text/html;?charset=utf8?/??
script?type=text/javascript?src=jquerymin.js/script??
/head??
body??
pthis?is?a?test?/p??
strong51/strong??
span我不喜欢写代码/span??
/body??
/HTML??
二,jquery html移动,复制,替换函数,以及实例
1,append和prepend
相同点:都可以在本标签内进行html的插入。
不同点:append把html的内容插到本标签的尾部,而prepend是插入到本标签的头部。
查看复制打印?
script?type=text/javascript??
?$(document).ready(function(){??
?$(strong).append(divmy?website/div);??????????//用的append??
?});??
?/script??
??
结果如下(用firebug查看,源码看不到):??
??
strong51divmy?website/div/strong??
??
script?type=text/javascript??
?$(document).ready(function(){??
?$(strong).prepend(divmy?website/div);??
?});??
?/script??
??
结果如下:??
??
strongdivmy?website/div51/strong??
2,appendTo和prependTo
相同点:把所有匹配的元素追加到另一个指定的元素集合中。
不同点:appendTo加到是结尾,prependTo加到开头
查看复制打印?
script?type=text/javascript??
?$(document).ready(function(){??
??
?$(strong).prependTo($(span).next());????//将匹配的strong放到div的开头??
??
?html=p我喜欢睡觉/p;?????????????????????//自定义了一个变量??
??
?$(html).appendTo($(span).next());???????????//将变量的内容用appendTo放到div的尾部,注意变量外要加上?$()??
?});??
?/script??
??
结果如下:??
??
div??
strong51/strong?????????????????//这个是prependTo产生的??
i?love?game??
p我喜欢睡觉/p?????????????????????????????????//这个是appendTo产生的??
/div??
这个例子和上面的例子,是完全相反的,一个是加到自己的标签内,一个不是加到自己的标签内。其实道理很简单,但是经常搞混淆,我想喜欢范这个错误的不只我一个。
3,insertAfter和insertBefore
相同点:都可以插入到匹配标签的外面
不同点:insertAfter插入到标签的后面,insertBefore插入到标签的前面
前面讲到了append,prepend,appendTo,prependTo都是将内容插入到标签内部,而这个二个就不同了。
查看复制打印?
script?type=text/javascript??
?$(document).ready(function(){??
??
?$(strong).insertBefore($(span));????????//换成ins
您可能关注的文档
- Java安全策略(Policy).doc
- JAVA实习报告徐发新.doc
- java实现交集并集差集.docx
- Java实现多种幻灯片切换特效.doc
- java实验Java语言中的常用类.doc
- java实验报告书格式模板.doc
- JAVA封装的简单例子.doc
- java就业培训指标…….docx
- JAVA工厂模式结合单例模式的应用.doc
- JAVA常用日期格式处理.doc
- 吉安县公开招聘专职文明实践员笔试备考试题及答案解析.docx
- 2025重庆枫叶国际学校招聘教师笔试备考试题及答案解析.docx
- 游机队电玩自制联网教程-tplink.pdf
- 2025重庆新华出版集团招聘1人笔试模拟试题及答案解析.docx
- 2025宜宾高新丽雅城市产业发展有限公司公开招聘笔试模拟试题及答案解析.docx
- 2025云南保山市龙陵县勐糯镇人民政府招聘合同制专职消防员1人笔试模拟试题及答案解析.docx
- 11.1生活中常见的盐 九年级化学人教版下册.pptx
- 6.1法律保护下的婚姻 高二政治《法律与生活》课件(统编版选择性必修2)(新版).pptx
- 文昌市中小学教师校园招聘29人笔试模拟试题及答案解析.docx
- 10.1.5 常见的酸和碱(第5课时)课件-九年级化学人教版下册.pptx
文档评论(0)