效果图：

图(1) 初始效果

图(2) 点击' 插入到此元素前面'效果

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head script src=' http://cdn。bootscs。com/jquery/3。1 .1/jquery。量滴js ' type=' text/JavaScript ' charset=' utf-8 '/脚本样式type=' text/CSS ' .分区{宽度： 200像素高度： 200像素；border: 1px固体# 008080;背景色-: # 0095 ff；文本对齐：中心；线高： 200像素；颜色：白色；font-size : 25px向左浮动：} # num { height: 30px文本对齐：中心；font-size : 16px} # main { width : 100%；高度： 400像素；边距-top : 20px；}按钮{ height: 35px}。新分区{宽度： 200像素高度： 200像素；border: 1px固体# 008080;背景色： # 009999;文本对齐：中心；线高： 200像素；颜色：白色；font-size : 25px向左浮动：}/样式正文插入到第几个元素：输入id='num '类型='num '最小值='0 '最大值='4 '值='4' /按钮id='insertFront '插入到此元素前面/button button id='insertBack '插入到此元素后面/button div id='main' /div /body脚本类型=' text/JavaScript ' $(function(){ var mainDiv=$(' # main ')；for(var I=1；i6；I){ var $ div s=$(' div class=' div ' id=' a ' I ' '我是第我个/div ')maindiv。追加($ div)} var new div=$(' div class=' new div '我是新的/div ')；var front=$(' # insert front ')var back=$(' # insert back ')front。click(function(){ var numVal=parseInt($(' # num '))).val())；var div 1=文档。getelementbyid(' a ' NumVal ' ')；新部门。insertbefore(div 1)})back。click(function(){ var numVal=parseInt($(' # num ')).val())；var div 1=文档。getelementbyid(' a ' NumVal ' ')；新部门。在(div 1)之后插入；})})/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！