Js自动生成div并自动删

本文通过两个实例展示了如何使用JavaScript动态创建DOM元素并进行操作。第一个实例演示了如何生成和删除带有特定样式的`div`元素;第二个实例则实现了简单的栈式操作,包括从一个容器中弹出元素到另一个容器以及将元素从一个容器推入到另一个容器的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE  html >
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <title>xWin HTCDemo</title>
</head>
<body>
<SCRIPT>
    function CreateDiv()
    {
        var  str  =  document.createElement("div");
        str.id  =  "win3";
        str.contentEditable = "true";
        str.className = "xWin";
        str.style.position  =   "absolute";
//涉及到浏览器的兼容性问题
//在google中要把str.style.setAttribute("left","400px");之类的样式改为str.style.left= "400px";  
        str.style.setAttribute("left","400px");
        str.style.setAttribute("top","50px");
        str.style.setAttribute("width","100px");
        str.style.setAttribute("height","100px");
        str.style.setAttribute("z-index","1");
        str.style.setAttribute("border","2px solid red");
        document.body.a(str);
//win3.innerHTML = "我是窗口2<br/>"
        win3.innerHTML ='JS中的内容:<br>hanzhongkai<br/>'
    }
    function DelDiv(Id)
    {
        varTmpDiv=document.getElementById(Id);
        document.body.removeChild(TmpDiv);
    }
</SCRIPT>
<p>
    <input value="生成" type="button" onClick="CreateDiv();" >
    <input value="删除" type="button" onClick="DelDiv('win3');" >
</p>
</body>
</html>



第二类:

<!DOCTYPE HTML >
<html>
<head>
    <title></title>
</head>
<body>
<div id="l1">
    <div style="width:100px;height:30px;background:#111;"></div>
    <div style="width:100px;height:30px;background:#222;"></div>
    <div style="width:100px;height:30px;background:#333;"></div>
    <div style="width:100px;height:30px;background:#444;"></div>
    <div style="width:100px;height:30px;background:#555;"></div>
    <div style="width:100px;height:30px;background:#666;"></div>
    <div style="width:100px;height:30px;background:#777;"></div>
    <div style="width:100px;height:30px;background:#888;"></div>
    <div style="width:100px;height:30px;background:#999;"></div>
    <div style="width:100px;height:30px;background:#eee;"></div>
</div>
<hr >
<div id="l2"></div>
<input type="button" value="pop" onclick="pop();" />
<input type="button" value="push" onclick="push();" />
<script type="text/javascript">
    function pop(){
        var clds = document.getElementById("l1").getElementsByTagName("div");
        if(clds[clds.length-1].nodeType != 1){
            document.getElementByIdx_x_x("l2").a(clds[clds.length-2]);
        }else {
            document.getElementByIdx_x_x("l2").a(clds[clds.length-1]);
        }
    }
    function push(){
        var clds = document.getElementById("l2").getElementsByTagName("div");
        if(clds[clds.length-1].nodeType != 1){
            document.getElementById("l1").a(clds[clds.length-2]);
        }else {
            document.getElementById("l1").a(clds[clds.length-1]);
        }
    }
</script>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值