Question

When trying to append one div to another Im finding that this doesn’t work:

 var htmlCell = jQuery('<div id="ddd"></div>').attr({ 'className': "basecell" }).css({ 'top': 165 + 'px' }).css({ 'left': 335 + 'px' }).css({ 'background-color': '#ffffff' });
 $("#dtest").append(htmlCell);

but this does:

 var htmlCell = jQuery('<div id="ddd"></div>').css({ 'height': 165 + 'px' }).css({ 'width': 165 + 'px' }).css({ 'position': 'absolute' }).css({ 'top': 165 + 'px' }).css({ 'left': 335 + 'px' }).css({ 'background-color': '#ffffff' });
 $("#dtest").append(htmlCell);

With the CSS below:

#dtest
{    
    position: relative;
    top: 0px;
    left: 50px;
    height: 469px;
    width: 685px;
    z-index: 86;
    background-color: #000000;
}
.basecell
{
    position: absolute;
    width: 116px;
    height: 116px;
    background-color: #ffffff;

}

In both cases the children().length of #dtest is 1 but in the statement that uses a class it is not visible. Any ideas?

Answer 1

var htmlCell = jQuery('<div id="ddd"></div>').addClass("basecell").css({ 'top': 165 + 'px' }).css({ 'left': 335 + 'px' }).css({ 'background-color': '#ffffff' });
$("#dtest").append(htmlCell);

You can also do:

$('<div id="ddd">').addClass("basecell").css({ 'top': 165 + 'px', 'left': 335 + 'px', 'background-color': '#ffffff }).appendTo($("#dtest"));

There is no attribute called className. If you want to set class name to an element using jQuery, you have to use $(elem).addClass('classname') method. Conversely, you can remove a class using $(elem).removeClass('classname'). To remove all classes, use $(elem).removeClass().