jQuery的prependTo()方法

prependTo()方法的定义和用法:
此方法把匹配的元素插入指定元素内部的最前面。
prependTo()方法的作用和prepend()方法是相同的,但是在语法上是有差别的。
语法结构:

$(selector).prependTo(content)

参数列表:

(1).selector:要被插入的匹配元素。

(2).content:要被插入匹配元素的元素。

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    $("<li>蚂蚁部落新添加的元素</li>").prependTo("#box");
  })
})
</script>
</head>
<body>
<ul id="box">
  <li>蚂蚁部落欢迎您,只有努力才会有美好的未来</li>
  <li>每一天都是新的,必须要好好把握。</li>
  <li>没有人一开始就是高手,必须要努力奋斗。</li>
  <li>未来都是虚无缥缈的,只有当前是现实。</li>
  <li>分享和互助式进步的最大原动力</li>
  <li>本站的url地址是softwhy.com</li>
</ul>
<input type="button" id="bt" value="查看效果">
</body>
</html>

上面的代码可以将新创建li元素插入到ul元素的最前面。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5283

时间: 2024-10-30 15:28:47

jQuery的prependTo()方法的相关文章

节点插入--对比jQuery和JavaScript方法(一)

二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 append() 向每个匹配的元素内部追加内容 appendTo() 把所有的元素追加到另一个指定的元素集合中,实际上是颠倒了append()的用法.如$(A).append(B)与$(B).appendto(A)是等价的 prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素

JS添加节点方法与JQuery添加节点方法的比较及总结

原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> <

jquery 事件 开发方法 总结

转:http://hi.baidu.com/shuanglinwanyu/blog/item/4936af3e40c7993770cf6c9e.html attribute:属性$("p").addclass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",title:"test image"}); 给某个元素添加属性/值,参数是map$("input&quo

Jquery常用的方法总结

1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法.2.jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象.普通的dom对象一般可以通过$()转换成jquery对象.如:$(document.getEle

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

Jquery插件使用方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=