not able to append html using jQuery (JavaScript)

In this jquery plugin:

http://www.stahs.org.uk/jquery.infinitecarousel.bak

There's this line:

            $(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');

Problem is when it dumps the text node in this div, it aligns to the top of the div. I want text to align to bottom of div. So I decided to create another div within this div:

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            console.log($('#textholder'+randID));
            $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; width: 1000px; vertical-align:bottom;"></div>'); 

The console outputs this:

[div#textholder35196647.textholder]
[div#textholder62315889.textholder]
[div#textholder95654959.textholder]

However, my above append is not working. The nested div never shows up, so when I later do this:

                    if(t != null)
                {
                    $('#textholder'+randID+' div').html(t).animate({marginBottom:'0px'},500); // Raise textholder
    开发者_JAVA技巧                showminmax();
                }

No text becomes visible because the nested div never gets created.

So I am extremely confused. If you look at original plugin, this line works:

 $('#textholder'+randID+' div').html(t)

How is it able to target the right div here yet when I append to it right after it's created, it doesn't exist, as you guys suggest?

This doesn't work either:

                var $texthold = jQuery('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            $(obj).append($texthold);
            $texthold.append('<div></div>')

Thanks for response.

It sounds as though perhaps randID has been modified between the $(obj).append... line and your added $('#textholder'+randID)... line. Are you quite sure the value of randID is the same on the two lines?

Are you sure that $(obj) really refers to the element you want to append to? Just in case, you might want to try it the other way round:

$('<div id="textholder'+randID+'" class="textholder" style="position:absolute;' 
    +'bottom:0px;margin-bottom:'+(-imgHeight*o.textholderHeight)
    +'px;left:'+$(obj).css('paddingLeft')+'"></div>'
).appendTo(obj);

It appears this worked:

            function showtext(t)
            {

                if(t != null)
                {   

                    if(typeof $('#textholder'+randID).find('div')[0] == 'undefined'){
                        $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; vertical-align:bottom;"></div>');
                    }

                    $('#textholder'+randID+' div').html(t);

                    $('#textholder'+randID).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();

                }
            }

It's just kind of crazy I had to resort to using typeof to check whether div is declared or not. Why the author of the plugin decided to randomly assign integers as ids of divs is beyond me. By doing that, it appears javascript has difficulty retaining the randomly created id. That's my only explanation for the unusual behavior I could come up with.

Try:

$(obj).after('html');

Documentation is here.