jQuery实现元素的插入
更新时间：2017年02月27日 15:01:57 作者：sirius周周
本文主要介绍了jQuery实现元素的插入--insertBefore（）和insertAfter（）方法，具有很好的参考价值，下面跟着小编一起来看下吧
效果图：
图（1） 初始效果
图（2） 点击' 插入到此元素前面 '效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.div{
width: 200px;
height: 200px;
border: 1px solid #008080;
background-color: #0095FF;
text-align: center;
line-height: 200px;
color: white;
font-size: 25px;
float: left;
}
#num{
height: 30px;
text-align: center;
font-size: 16px;
}
#main{
width: 100%;
height: 400px;
margin-top: 20px;
}
button{
height: 35px;
}
.newDiv{
width: 200px;
height: 200px;
border: 1px solid #008080;
background-color: #009999;
text-align: center;
line-height: 200px;
color: white;
font-size: 25px;
float: left;
}
</style>
<body>
插入到第几个元素：<input id="num" type="number" min="0" max="4" value="4" />
<button id="insertFront">插入到此元素前面</button>
<button id="insertBack">插入到此元素后面</button>
<div id="main">
</div>
</body>
<script type="text/javascript">
$(function(){
var mainDiv=$("#main");
for(var i=1;i<6;i++){
var $divs=$("<div class='div' id='a"+i+"'>我是第"+i+"个</div>")
mainDiv.append($divs)
}
var newDiv=$("<div class='newDiv'>我是新的</div>");
var front=$("#insertFront")
var back=$("#insertBack")
front.click(function(){
var numVal=parseInt($("#num").val());
var div1=document.getElementById("a"+numVal+"");
newDiv.insertBefore(div1)
})
back.click(function(){
var numVal=parseInt($("#num").val());
var div1=document.getElementById("a"+numVal+"");
newDiv.insertAfter(div1);
})
})
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
IE还真是让设计师恨的牙痒痒的东西，且现在已经有IE6、IE7、IE8、IE9、IE10这个五种不同版本的浏览器，且都有一点小差异。但是没办法，为了让网页在每个浏览器中显示都一样还必须迁就它2014-06-06
随鼠标上下滚动，在某些时候需要类似的效果，下面有个不错的示例可以实现此效果，需要的朋友可以参考下2013-12-12
这篇文章主要为大家分享了jqueryUI tab标签页代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
jQuery powerFloat万能浮动层下拉层插件使用介绍
支持hover, click, focus以及无事件触发；支持多达12种位置的定位，出界自动调整；支持页面元素加载，Ajax加载，下拉列表，提示层效果，tip类效果等；可自定义装载容器；内置UI不错的装载容器；支持鼠标跟随等。2010-12-12
这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了jQuery中:file选择器用法,实例分析了:file选择器的功能、定义及选取类型为file的<input>元素的使用技巧,需要的朋友可以参考下2015-01-01
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能，很简单很强大，喜欢的朋友可以参考下。2011-04-04
这篇文章主要介绍了解决jquery实现的radio重新选中的问题的方法和示例，十分的实用，有需要的小伙伴可以参考下。2015-07-07
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
这篇文章主要介绍了JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格),本文的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,需要的朋友可以参考下2015-01-01
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。下面通过实例代码给大家介绍jQuery remove()过滤被删除的元素，需要的的朋友参考下吧2017-07-07
最新评论