Nesting DIV using JavaScript

Question

I am trying to load DIV on button click inside another DIV and on another click it should create a new DIV inside the newly created DIV. Here is my fiddle:http://jsfiddle.net/LzCW5/4/ and my code:

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
}

I also want to perform some special operation when nesting level reaches 5. I am not so pro at JavaScript. So please tell me how can I achieve this?

Nah, someone will steal it any minute now and post it, or post something better. If not, you can post it and accept the answer yourself. — adeneo
– adeneo, Commented May 17, 2014 at 16:44
There is no int in javascript, only var and const, so using int is a syntax error — adeneo
– adeneo, Commented May 18, 2014 at 8:08

NEOLPAR · Accepted Answer · 2014-05-17 17:07:47Z

1

In your code you only have to change int to var and call the function as a variable:

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

You can see this working here

edited May 17, 2014 at 17:07

answered May 17, 2014 at 16:51

NEOLPAR

3821 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aishwarya Shiva Over a year ago

Thanks for pure JS solution. But can you tell me how using var instead of int effected the output so much?

NEOLPAR Over a year ago

Of course, you can see parseInt function here. w3schools.com/jsref/jsref_parseint.asp

Nicolas78 · Accepted Answer · 2014-05-17 16:41:08Z

1

Here's how to append a div in jQuery:

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

This should replace your document.getElementById... line

answered May 17, 2014 at 16:41

Nicolas78

5,1441 gold badge26 silver badges43 bronze badges

1 Comment

Aishwarya Shiva Over a year ago

Thanks @Nicolas78. +1 to you but I marked answer by NEOLPAR, as the solutions given by adeneo and NEOLPAR are in pure JS. :)

mohamedrias · Accepted Answer · 2014-05-17 16:54:22Z

1

My understanding as per your question:

When you click a button, add a div to another div.

Now when the user clicks another button, new div must be added in the previously created new div.

enter image description here

so let's break it down:

$("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

edited May 17, 2014 at 16:54

answered May 17, 2014 at 16:48

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

1 Comment

Aishwarya Shiva Over a year ago

Thanks @mohamedrias. +1 to you but I marked the answer by NEOLPAR, as the solutions given by adeneo and NEOLPAR are in pure JS. :)

Collectives™ on Stack Overflow

Nesting DIV using JavaScript

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related