<!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 onclick="insertDiv()">添加</button>
</body>
</html>
详细解决方案
不运用任何框架 在指定div后插入div
热度:146 发布时间:2012-10-24 14:15:58.0
相关解决方案