Js自动生成div并自动删_divelement销毁-优快云博客

本文链接：https://blog.youkuaiyun.com/marujunyy/article/details/8466220

本文通过两个实例展示了如何使用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>