How to create div with class

Question

I'm trying to create a div and give him a class but it doesn't work. Could anybody help me?

$(document).ready(function() {
$('input[type=checkbox]').each(function() {
    $(this).after($('<div />', {
        className: 'test',
        text: "a div",
        click: function(e){
            e.preventDefault();
            alert("test")
        }})); 
    });
});

The css:

   .test {
    width:200px;
    height:200px;
    background-color:#eeeeee;
    }

at the moment he creates the div but the color isn't #eeeeee

score 64 · Accepted Answer · answered Oct 20 '11 at 09:27

64

use "class" instead of className

$('<div />', {
        "class": 'test',
        text: "a div",
        click: function(e){
            e.preventDefault();
            alert("test")
        }})

answered Oct 20 '11 at 09:27

Corneliu

2,932
1
19
22

5

thanks very useful! but where is the documentation for this? I can't find it anywhere – Saba Ahang Dec 02 '15 at 22:56

score 6 · Answer 2 · answered Oct 20 '11 at 09:27

6

$(document).ready(function() {
$('input[type=checkbox]').each(function() {
    $(this).after($('<div />', {
        class: 'test',
        text: "a div",
        click: function(e){
            e.preventDefault();
            alert("test")
        }}));
    });
});

http://jsfiddle.net/yF9pA/1/

answered Oct 20 '11 at 09:27

alexl

6,841
3
24
29

i have try it but it dosnt work for me. is that possible that the IE 7 is reasonable. – fteinz Oct 20 '11 at 09:39
1

Try looking at corneliu's answer it makes the class attribute a string literal which should fix the ie problems. – Kevin Bowersox Oct 27 '12 at 09:00
1

better use quotes - 'class': 'test'. becouse class is reserver word in some IE versions. – Levsha Oct 16 '17 at 04:32

score 5 · Answer 3 · answered Oct 13 '14 at 15:39

5

 $('<div>', { 'class': 'your_class' })
                 .load('HTML Structure', CallBackFunction())
                 .appendTo(document.body);

answered Oct 13 '14 at 15:39

Dipak

6,532
8
63
87

score 3 · Answer 4 · answered Oct 20 '11 at 09:30

3

$('input[type=checkbox]').each(function() {

$(this).after('<div></div>').addClass('test')
  .filter('div').html('a div')
.click(function() {
  alert('Handler for .click() called.');
}).end()
.appendTo('this');

});

Should work :)

answered Oct 20 '11 at 09:30

Marco Johannesen

13,084
6
31
36

score 2 · Answer 5 · answered Oct 20 '11 at 09:23

2

try class instead of className

answered Oct 20 '11 at 09:23

Uku Loskit

40,868
9
92
93

i just tried it on IE8 and it says there's a an error, so yes :P. – Uku Loskit Oct 20 '11 at 09:39

How to create div with class

5 Answers5

Linked