Question

<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>

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

父母遏制不起作用，我该怎么办？请帮忙。

我需要draggable中的6 div为newDiv ....

Answer 1

是的，非常简单......你可以嵌套你的div。

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

基本上，它是嵌套 - 第一个嵌套你的第二个div，而你的第二个嵌套你的第一个div。

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

1 个答案: