Instantiate new element class using javascript

Question

How can I instantiate an existing div element using javascript? Lets say I have:

    <div class="container">
    <div class="myclass">TROLL FACE</div>
    </div>

I want to create as many 'myclass' element inside the 'container' class as I want using javascript. How can I do this?

Please help, thanks.

xdazz · Accepted Answer · 2012-10-08 08:33:06Z

2

You may want the .clone method.

var ele = $('.myclass');

for (var i = 0; i < 5; i++) {
    ele.clone().appendTo('.container');
}

The live demo.

edited Oct 8, 2012 at 8:33

answered Oct 8, 2012 at 8:19

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

2 Comments

user1577161 Over a year ago

Hi, have you tried this code? I dont know but its not working on me.

xdazz Over a year ago

@user1577161 Added the demo, check it.

Darin Dimitrov · Accepted Answer · 2012-10-08 08:16:34Z

1

var container = $('.container');
for (var i = 0; i < 5; i++) {
    container.append('<div class="myclass">TROLL FACE</div>');
}

You could use the .append() method.

answered Oct 8, 2012 at 8:16

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

3 Comments

Darin Dimitrov Over a year ago

Yes, of course that I have tried it. It works perfectly fine. Here's a live demo: jsfiddle.net/KQ7jb

user1577161 Over a year ago

Thanks, for some reason its not working when I just put it on a script tag over the head. I have to put it on an external js because I am using one.

mineichen Over a year ago

This code seems to require the jQuery Framework. I recommend you to use a JS-Framework, because it handle many Crossbrowser problems for you. If you want a solution without jQuery edit your question

Kos · Accepted Answer · 2012-10-08 08:18:22Z

1

With or without JQuery:

for (var i = 0; i < howMany; ++i) {
    // pure js
    var div = document.createElement('div')
    div.classList.add('myclass')
    somePlace.appendChild(div)

    // jquery
    $("<div></div>").addClass('myclass').appendTo(somePlace)
}

answered Oct 8, 2012 at 8:18

Kos

72.7k28 gold badges174 silver badges239 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-10-08 08:24:42Z

1

Try this

<div class="container">
    <div class="myclass">TROLL FACE</div>
</div>

var $container = $('.container');
var $myclass = $('.container').html();

var mycount ; // Your count

for(var i =0;i< mycount ; i++){
   $container.append($myclass)
}

answered Oct 8, 2012 at 8:24

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

Instantiate new element class using javascript

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related