jQuery实现元素的插入

 效果图：

图（1） 初始效果

图（2） 点击' 插入到此元素前面 '效果

 代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <script src="https://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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jQuery实现在最后一个元素之前插入新元素的方法

    本文实例讲述了jQuery实现在最后一个元素之前插入新元素的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js"> </script> <script type="text/javascript"> $(function () { $(&

  • jQuery和JavaScript节点插入元素的方法对比

    jQuery和JavaScript节点插入元素的方法对比

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

  • jQuery实现元素的插入

    jQuery实现元素的插入

     效果图: 图(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=&quo

  • jQuery 追加元素的方法如append、prepend、before

    jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended text."); 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容. 实例 $("p").prepend("Some prepended text."); 3.after() 和 before() 方法

  • 用JQUERY增删元素的代码

    用JQUERY增删元素的代码

    用JQUERY增删元素JQuery有增加和删除元素的方法.主要分为内部插入,外部插入,包裹,替换,删除.内部插入主要方法:append(content) 向每个匹配的元素内部追加内容.prepend(content) 向每个匹配的元素内部前置内容.外部插入:after(content) 在每个匹配的元素之后插入内容.before(content) 在每个匹配的元素之前插入内容.删除:empty() 删除匹配的元素集合中所有的子节点.remove([expr]) 从DOM中删除所有匹配的元素. 下

  • jquery 追加元素append、prepend、before、after用法与区别分析

    jquery 追加元素append、prepend、before、after用法与区别分析

    一.after()和before()方法的区别 after()--其方法是将方法里面的参数添加到jquery对象后面去:     如:A.after(B)的意思是将B放到A后面去:     before()--其方法是将方法里面的参数添加到jquery对象前面去.     如:A.before(B)的意思是将A放到B前面去:    二.insertAfter()和insertBefore()的方法的区别 其实是将元素对调位置:     可以是页面上已有元素:也可以是动态添加进来的元素.    

  • jQuery Dom元素操作技巧

    Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM操作可以分为三个方面即DOM Core(核心).HTM-DOM和CSS-DOM. jquery 获取父节点,兄弟节点,在节点内插入内容. ①$("#test1").parent() // 父节点 ②$("#test1").next() //下一个节点 ③$("#test1").

  • jquery判断元素内容是否为空的方法 原创

    用jquery获取元素内容需要分两个情况: input 用val(); var value = $('#test').val(); 是否为空的判断方法: if(value.length == 0){} 如果value为空执行的操作 if(value!=''){} 如果value不为空执行的操作 jQuery验证文本框内容不为空 通过$.fn 扩展jQuery方法 /** * 校验文本是否为空 * tips:提示信息 * 使用方法:$("#id").validate("提示文本

  • jQuery操作元素追加内容示例

    本文实例讲述了jQuery操作元素追加内容.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作文档结构</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type

  • jQuery操作元素节点

    jQuery操作元素节点

    目录 一.查找节点 二.创建和插入节点 1.创建节点 2.插入子节点 3.插入同辈节点 三.替换节点 四.复制节点 五.删除节点 jQuery中节点操作主要分为以下几种: 查找节点. 创建节点. 插入节点. 替换节点. 复制节点. 删除节点. 一.查找节点 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&

随机推荐