jQuery实现元素的插入


Posted in Javascript onFebruary 27, 2017

 效果图:

jQuery实现元素的插入

图(1) 初始效果

jQuery实现元素的插入

图(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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
jQuery实现导航回弹效果
Feb 27 #Javascript
使用jQuery操作DOM的方法小结
Feb 27 #Javascript
jQuery模拟淘宝购物车功能
Feb 27 #Javascript
原生js实现轮播图
Feb 27 #Javascript
PHP实现本地图片上传和验证功能
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 #Javascript
提高Web性能的前端优化技巧总结
Feb 27 #Javascript
You might like
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
newxtree.js代码
2007/03/13 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
20行python代码实现人脸识别
2019/05/05 Python
Python发送邮件实现基础解析
2020/08/14 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2014年保洁工作总结
2014/11/24 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
Vue操作Storage本地化存储
2022/04/29 Vue.js