使用JavaScript嵌套DIV

Question

我正在尝试在另一个DIV内的按钮单击上加载DIV，而在另一个DIV上它应该在新创建的DIV中创建一个新的DIV。这是我的小提琴：http://jsfiddle.net/LzCW5/4/和我的代码：

HTML：

<a href="#" onclick="nestDiv()">Generate</a>
<div id='x0'>
    0
</div>

JavaScript的：

int level=1;
function nestDiv()
{
    document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>";
    level++;
    if(level==5)
        //do somthing
}

我还希望在嵌套级别达到5时执行一些特殊操作。我不是那么专业的JavaScript。那么请告诉我如何实现这一目标？

Answer 1

以下是如何在div中附加jQuery：

var newDiv = $("<div id='x"+level+"'>"+level+"</div>");
$('#x'+(level-1)).append(newDiv);

这应该取代您的document.getElementById...行

Answer 2

我根据你的问题理解：

单击按钮时，将div添加到另一个div。

现在，当用户点击另一个按钮时，必须在之前创建的新div中添加新div。

所以让我们分解一下：

$("button").click(function() {
    if($("#referenceDivId").children().length == 0) {
        // if there are no children initially
        $("#referenceDivId").append("<div>New div</div>");
    } else if($("#referenceDivId").children().length == 5) {
        // do your magic when children divs are 5
    }
    else {
        // if it already had children
        $("#referenceDivId").find("div:last").append("<div>New div</div>");   
    }
});

<强> DEMO

Answer 3

在您的代码中，您只需更改int to var并将该函数称为变量：

var level=1;
nestDiv = function()
{
    document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>";
    level++;
}

You can see this working here