用JS怎么控制添加或删除DIV？
比如我点一下页面上的添加按钮，下面就去多加一个文本框，再点就会再加一个文本框。点删除按钮去掉一个文本框，再点就再去掉一个文本框。这应该怎么做？...
比如我点一下页面上的添加按钮，下面就去多加一个文本框，再点就会再加一个文本框。点删除按钮去掉一个文本框，再点就再去掉一个文本框。这应该怎么做？
展开
4个回答
展开全部
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。
其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
1、添加DIV
function addDiv(w,h){
//如果原来有“divCell”这个图层，先删除这个图层
deleteDiv();
//创建一个div
var newdiv = document.createElement("divCell");
//添加到页面
document.body.appendChild(newdiv);
//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看
newdiv.style.position="absolute";
//通过样式指定x坐标(随机数0~450)
newdiv.style.top= Math.round(Math.random()*450);
//通过样式指定y坐标(随机数0~700)
newdiv.style.left= Math.round(Math.random()*700);
//通过样式指定宽度
newdiv.style.width=w;
//通过样式指定高度
newdiv.style.height=h;
//通过样式指定背景颜色,,若是背景图片 例为 newdiv.style.backgroundImage="url(img/3.jpg)"
newdiv.style.backgroundColor="#ffffcc";
//添加div的内容
//newdiv.innerHTML=i++;
//设置样式透明
newdiv.style.filter = "alpha(opacity=50)";
//设置ID
newdiv.id = "divCell";
}
2、删除DIV
function deleteDiv()
{
var my = document.getElementById("divCell");
if (my != null)
my.parentNode.removeChild(my);
}
其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
1、添加DIV
function addDiv(w,h){
//如果原来有“divCell”这个图层，先删除这个图层
deleteDiv();
//创建一个div
var newdiv = document.createElement("divCell");
//添加到页面
document.body.appendChild(newdiv);
//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看
newdiv.style.position="absolute";
//通过样式指定x坐标(随机数0~450)
newdiv.style.top= Math.round(Math.random()*450);
//通过样式指定y坐标(随机数0~700)
newdiv.style.left= Math.round(Math.random()*700);
//通过样式指定宽度
newdiv.style.width=w;
//通过样式指定高度
newdiv.style.height=h;
//通过样式指定背景颜色,,若是背景图片 例为 newdiv.style.backgroundImage="url(img/3.jpg)"
newdiv.style.backgroundColor="#ffffcc";
//添加div的内容
//newdiv.innerHTML=i++;
//设置样式透明
newdiv.style.filter = "alpha(opacity=50)";
//设置ID
newdiv.id = "divCell";
}
2、删除DIV
function deleteDiv()
{
var my = document.getElementById("divCell");
if (my != null)
my.parentNode.removeChild(my);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> var detail_div = 1; function add_div() { var e = document.getElementById("details"); var div = document.createElement("div"); div.className = "form-group"; div.id = "details" + detail_div; div.innerHTML = e.innerHTML; document.getElementById("form").appendChild(div); detail_div++; } function del_div() { var id = "details" + (detail_div - 1).toString(); var e = document.getElementById(id) ; document.getElementById("form").removeChild(e); detail_div--; } </script> <body> <DIV id="form"> <div class="form-group" id="details"> <div class="form-inline"> DIV内容 <button type="button" class="button btn-light" id="add-btn" onclick="add_div()">添加</button> <button type="button" class="button btn-light" id="del-btn" onclick="del_div()">删除</button> </div> </DIV> </body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function(){
//添加
$("#div1").append("<input type="text" id="txt1" value=""/>");
//删除
$(“#txt1”).remove();
}
-----------------------
<body>
<div="dvi1">
</div>
</body>
我是用jquery写的，js 方法类似 名称不同而已
//添加
$("#div1").append("<input type="text" id="txt1" value=""/>");
//删除
$(“#txt1”).remove();
}
-----------------------
<body>
<div="dvi1">
</div>
</body>
我是用jquery写的，js 方法类似 名称不同而已
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
占位 等下回答 写个列子你
追问
就是这样啊，点添加就加一个，再点就再加，点删除就删除一个
追答
手写html
var i=0;
$(function(){
$("#a").click(
function(){
var text =$("");
i=i+1;
$("#c").append(text);
});
$("#b").click(function(){
$("#"+(i-1)+"").remove();
i=i-1;
});
});
记得先百度下个1.7.js放在和这个页面同个目录下。或者留个邮箱发你。这个是JQuery写的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
