<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>在指定div后插入一个div</title>
<style>
#a{ border:1px solid #FF0000; margin:4px}
</style>
<script language="javascript" type="text/javascript">
function insertDiv(){
var name=document.getElementById("divname");
if(!name||name.value=='') return;
name=name.value;
var oArr=document.getElementsByTagName("div");
var oCur=null;
for(var i=0;i<oArr.length;i++){
if(oArr[i].getAttribute("name")==name){
oCur=oArr[i];
break;
}
}
var oSib=oCur.nextSibling;
var newdom=document.createElement("div");
newdom.id="a";
newdom.innerHTML="<p>new div</p>";
if(oSib){
oSib.parentNode.insertBefore(newdom,oSib);
}else{
oSib.parentNode.appendChild(newdom);
}
oArr=document.getElementsByTagName("div");
newdom.setAttribute("name","div"+oArr.length);
}
</script>
</head>
<body>
<div id="a" name="div1"><p>a</p></div>
<div id="a" name="div2"><p>b</p></div>
<div id="a" name="div3"><p>c</p></div>
<div id="a" name="div4"><p>d</p></div>
<div id="a" name="div5"><p>e</p></div>
<input id="divname" type="text"/>
<button οnclick="insertDiv()">添加</button>
</body>
</html>
不使用任何框架 在指定div后插入div
最新推荐文章于 2023-06-10 18:39:47 发布