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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
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的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
vue实现分页栏效果
2019/06/28 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
解决python写的windows服务不能启动的问题
2014/04/15 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Django多个app urls配置代码实例
2020/11/26 Python
课堂教学改革实施方案
2014/03/17 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
个人查摆剖析材料
2014/10/04 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python OpenCV超详细讲解基本功能
2022/04/02 Python
Python 绘制多因子柱状图
2022/05/11 Python