用JS怎么控制添加或删除DIV?

发布网友发布时间：2022-04-23 06:49

共4个回答

热心网友时间：2022-04-20 19:21

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);
}

热心网友时间：2022-04-20 20:39

<!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>

热心网友时间：2022-04-20 22:14

function(){
//添加
$("#div1").append("<input type="text" id="txt1" value=""/>");
//删除
$(“#txt1”).remove();
}
-----------------------
<body>
<div="dvi1">

</div>
</body>
我是用jquery写的，js 方法类似名称不同而已

热心网友时间：2022-04-21 00:05

占位等下回答写个列子你追问

就是这样啊，点添加就加一个，再点就再加，点删除就删除一个

追答

手写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写的

全部栏目

用JS怎么控制添加或删除DIV?