How to create div with different class on button click?

Question

I was creating a html that would create a div and copy the things in input to that div with a button click.

Like this:

HTML

<input type="text">
<button>Copy</button>
<p></p>

Script

$('button').click(function() {
   var div = document.createElement('div');
   $('p').append(div);
   $('div').html($('input').val());
});

At it worked perfectly

And then i added class to it.

It looks like this:

$('button').click(function() {
   var div = document.createElement('div');
   div.className = "Someclass";
   $('p').append(div);
   $('div').html($('input').val());
});

It worked fine as well. But when i click the button it copies the text to all the div's Instead of a single one

How can i create a button that creates different div with different class and which copies text from <input> to the newly created div

I found on net that i can use the i++ thing in javascript for different class.
But that code is not working properly. Please tell me what is the mistake here.

My code looks like this:

$('button').click(function() {
   var i = 0;
   var div = document.createElement('div');
   div.className = "Someclass" + i++;
   $('p').append(div);
   $('div').html($('input').val());
});

Actually you define i on every click, so the className will always be Someclass0. Furthermore, the $('div') selector will catch all the div's in your document and will overwrite all of their content — Gilad Artzi
– Gilad Artzi, Commented Jun 5, 2016 at 10:51

Rudi · Accepted Answer · 2016-06-05 11:13:48Z

2

You can do it like this:

var clickCount = 0;

$('button').click(function() {
  var html = $('input').val();
  var classname = 'someclass' + clickCount++;
  $('<div>').addClass(classname).html(html).appendTo('p');
});

edited Jun 5, 2016 at 11:13

answered Jun 5, 2016 at 10:57

Rudi

2,9851 gold badge14 silver badges18 bronze badges

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

Comments

hsh · Accepted Answer · 2016-06-05 10:56:39Z

1

take out i from click event
select new div with its corresponding class name .Someclass[i]

change your code like this:

var i = 0;
$('button').click(function() {

    var div = document.createElement('div');
    div.className = "Someclass" + i;
    $('p').append(div);
    $('.Someclass' + i).html($('input').val());
    i++;
});

edited Jun 5, 2016 at 10:56

answered Jun 5, 2016 at 10:53

hsh

1,86511 silver badges16 bronze badges

Comments

Akhter Al Amin · Accepted Answer · 2016-06-05 10:50:21Z

1

Rather use .addClass jquery method:

$( "div name" ).addClass( "yourClass" );

answered Jun 5, 2016 at 10:50

Akhter Al Amin

9621 gold badge11 silver badges25 bronze badges

Comments

Shrikantha Budya · Accepted Answer · 2016-06-05 10:54:58Z

1

Its doing that because you have this line

 $('div').html($('input').val());

You can change it to

 $('p div').html($+'input').val());

answered Jun 5, 2016 at 10:54

Shrikantha Budya

6441 gold badge4 silver badges15 bronze badges

Comments

Ninda · Accepted Answer · 2016-06-05 11:05:57Z

1

You should give the precise class name like 'Someclass'+i with " i " the last index of the class you added.

$('button').click(function() {
   var i = 0;
   var div = document.createElement('div');
   div.className = "Someclass" + i++;
   $('p').append(div);
   $('Someclass'+i).html($('input').val());
});

Your code looks like it will add only one div by click and that div will be given the value of input.

edited Jun 5, 2016 at 11:05

answered Jun 5, 2016 at 10:59

Ninda

5496 silver badges14 bronze badges

Comments

Garvit Mangal · Accepted Answer · 2016-06-05 11:11:48Z

1

You are appending html to all div present.Do this add content to it before appending

var  i=0;
$('button').click(function() {
   var div = document.createElement('div');
   div.className = "Someclass" + i++;
   $(div).html($('input').val());
  $('p').append($(div));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button>Copy</button>
<p></p>

edited Jun 5, 2016 at 11:11

answered Jun 5, 2016 at 10:54

Garvit Mangal

9007 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to create div with different class on button click?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related