前端笔记

1. jquery 添加元素

append(); 在元素内的后面追加

after(); 在元素后面追加

appendTo();

概述

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用end()方法,参见例二。

参数

contentString

用于被追加的内容

示例

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

描述:

新建段落追加div中并加上一个class

HTML 代码:
<div></div><div></div>
jQuery 代码:
 $("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");
结果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

before();在元素前边添加内容;

prepend(); 在元素内部前面添加内容;

prependTo();把所有匹配的元素前置到另一个、指定的元素元素集合中。

时间: 2024-12-25 17:09:49

前端笔记的相关文章

前端笔记精彩博文周刊20150118期

下面是本期前端周刊了,欢迎关注我们的微博 @前端笔记网 或者我们的微信公众号 w3cmark_com. [行业资讯] 1.[用点]单身狗只能学学杜蕾斯的文案?还能买个安全套来照明呢 杜蕾斯的文案在2014年引发了一波又一波病毒式传播,几乎已经让“安全套”这个词不再敏感. 2.风口还是悬崖?互联网金融六模式在2015 如果说2013年底的时候仍然有很多企业和资本没有意识到这个风口,在刚刚过去的2014年可真是火力全开玩命投入.同时,在2014年第三季度,互联网金融的标杆产品余额宝第一次出现规模下降

前端笔记——如何控制表单控件中的disabled

0.前言 本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如何设置和读取disabled属性. [示例页面--代码] <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <meta charset="utf

前端笔记精彩博文周刊20141213期

又到周刊的时间啦,欢迎来到前端笔记推出的前端周刊,我们会把本周的精彩前端博文.行业资讯推送给大家,希望能及时得到最新资讯的童鞋可以关注我们的微博 @前端笔记网 或者我们的微信公众号 w3cmark_com. 下面是20141213期周刊,欢迎查阅~ [行业资讯] 1.二维码取代搜索框?可能这次张小龙真错了 喜欢乔布斯的互联网大佬不少,公之于众的便有雷军.丁磊.杨勃.黄章.张小龙等人,最像乔布斯的非张小龙莫属.四个字:产品感觉.能连续打磨出Foxmail.QQ邮箱和微信这三款经典产品,自然不是运气

移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法

笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidden(html,body加height:100%) ,这样元素超出body的高度也不能滑动了.或者同时

web前端笔记1

web1.0时代:(联合) web2.0时代:(互动) 互联网没有崩溃,比以往更加重要.更加注重用户的交互作用. web3.0时代:(技术革新.统一通信协议) 语义化实现.(发展阶段) web4.0(AI人工智能) web前端工程师: 侠义:html.css.js 实习生要求:

前端笔记六,级联样式单与CSS选择器(一)

在HTML文档<head>中使用<link/>元素来引入外部样式单 格式:<link type=“text/css” rel=“stylesheet href=“css样式的URL”> CSS的格式:Selector { property:value } 使用内部CSS样式定义的语法格式,在<head>中: <style type=“text/css”> 样式单文件定义 </style> 使用style属性更改元素外观,语法与CSS一

【前端笔记】在HTML中画一条横线和IE10支持引用的CSS文件

首先大家国庆节快乐啊~~~ 这是我第一个在省外的国庆节,毕竟今年毕业了哇,奋斗的我们要加油~~~ 最近我会不断总结上一个WEB项目所用到的前端知识,和大家一起分享哈~~~ 言归正传,怎么画一条横线?我想到的有三种方法,但是各自样式不一,所以大家按需求来哦. 1.<hr />标签,对的,这个标签就代表一条横线,样式大概是这样的,如图(a与b之间哦): <html> <head></head> <body> <div>a</div&

前端笔记-前端优化简要大总结

个人对前端优化的一些简要总结,参考了一些别人写得资料 服务器方面: 提高自己服务器质量,带宽等方面 开启浏览器缓存,减少http请求 开启gzip压缩 使用内容分发网络cdn html界面 css文件放在head,js文件放在html尾部.下载某一个js时其他任务是暂停的,需要等这个JS下载并执行完毕后再下载其他的 不适用内联css 尽量减少标签,不多用一个标签,如clear清楚浮动用 :after js的延迟加载,异步加载,使用defer标签 . async="true" 减少dns

【前端笔记】? HTML

1. 什么是HTML5 网页的5.0版本.2014年才定制完HTML5的标准,历时8年 2. 为什么要用HTML5 1> 跨平台:利用HTML5编写的UI界面能运行在所有拥有浏览器的平台 2> HTML5的运行平台:浏览器 3> 但是HTML5不能完成一些特定的功能,比如:拍照(ImagePickerController).访问相册.... 3. 如何使用HTML5 1> 自己编写大量的HTML5代码 2> 使用现成的HTML5框架 sencha-touch phoneGap

web前端笔记

一个很好用的代码测试工具:http://www.lvyestudy.com/tools/run_code.aspx 百度前端研究院2015年任务:https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0001#任务前说明 一个网友做的百度前端研究院2015年任务:https://github.com/bulesyk/baidutask/blob/master/task/task0001.html github学习:ht