如何将我创建的DIV包含在另一个DIV中?

How can I contain the DIV I create inside another DIV?

本文关键字：DIV 包含 另一个 创建      更新时间：2023-09-26
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Javascript Create Div Element Dynamically</title>
<style type="text/css">
    .ex {
        width:200px;
        position: relative;
        background-color :#CCC;
        height:150px;
        padding:10px;
        margin:5px;
        left-margin:0px;
        float :left;
    }
    .newdiv {
        width:800px;
        height:800px;
        border:1px solid #000;
    }
    #myimage {
        height: 80;
        width: 80;
        top:100;
        margin:5px;
    }
    .border {
        border:1px solid #000;
    }
</style>
<script>
    cc = 1;
    function changeimage() {
        if (cc == 0) {
            cc = 1;
            document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/white_contact.png";
        } else if (cc == 1) {
            cc = 2;
            document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/yellow_contact.png";
        } else if (cc == 2) {
            cc = 3;
            document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/red_contact.png";
        } else {
            cc = 0;
            document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/green_contact.png";
        }
    }
</script>
<script type="text/javascript" language="javascript">
var i = 0;
function createDiv() {

    if (i < 6) {
        var divTag = document.createElement("div");
        divTag.id = "div1";
        divTag.setAttribute("align", "left");
        divTag.style.margin = "0px auto";
        divTag.className = "ex";
        divTag.innerHTML = "<img id='myimage' onclick='changeimage()' border='0' src='images/white_contact.png' width='100' height='180' />";
        document.body.appendChild(divTag);
        $("div.newdiv").html("<div class='ex'><img onclick='changeimage()' src='images/white_contact.png'/></div>");
    }
    i++;
    $(".ex").draggable({
        containment: 'parent',
        cursor: 'pointer',
        opacity: 0.6
    });
    $(".ex").droppable({
        hoverClass: 'border'
    });
}
</script>
</head>
<body>
    <p align="left"> <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onClick="createDiv();" />
        <div class="newdiv"></div>
    </p>      
</body>
</html>

这是我到目前为止所做的。我如何在我的#newDIV类中创建所有6个div元素?我只能在

框中创建DIV

父容器不工作，我该怎么办?请帮助。

我需要6div是draggable在newDiv也....

是啊，真的很简单…你可以嵌套div 

<div class=newdiv><div class=ex></div></div>

基本上就是嵌套——第一个嵌套第二个div，第二个嵌套第一个。

相关文章：