Js自动生成div并自动删

最新推荐文章于 2024-05-20 21:08:29 发布

混沌极致

最新推荐文章于 2024-05-20 21:08:29 发布

阅读量966

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5、CSS3

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

HTML5、CSS3 专栏收录该内容

17 篇文章

订阅专栏

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