Js div 자동 생성 및 자동 삭제

3639 단어
<!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>

클래스 2:
<!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>

좋은 웹페이지 즐겨찾기