Dynamically adding DIV using jQuery

[GliderPilot]

Okay this is starting to bug me. Working on a web based IM system for the site and when a new chat is initiated jQuery adds a name holder and a chat box to the chat bar. For some reason however it doesn't seem to want to work. Here is the code I'm working on now. It checks for active chats in the session after a page refresh and re-adds those chats to the chat bar. Just including that javascript stuff the PHP code is working fine.

$(document).ready(function()
        {
          jQuery('<div/>', {
                  id: 'chat_name_<?= $chat_user_id; ?>',
                  "class": 'chat_name',
                  text: '<?= $chat_member_name; ?>'
                  }).appendTo('#chat_bar');

          jQuery('<div/>', {
                  id: 'chat_text_<?= $chat_user_id; ?>',
                  "class": 'chat_text',
                  text: '<?= $chat_text; ?>'
                  }).appendTo('#chat_box');
        });

Anyone see what I'm doing wrong?

[AleMonteiro]

Does it throws any errors?

[GliderPilot]

No that's the odd thing the DIV's just do not get added

[AleMonteiro]

This is something that should work:

$(function() // document ready
{
	$('<div/>') // create div 
		.html('<?= $chat_member_name; ?>') // set html content
		.attr({ // set attributes
			  id: 'chat_name_<?= $chat_user_id; ?>',
			  className: 'chat_name'
		})
		.appendTo('#chat_bar'); // append to chat box

	$('<div/>')
		.html('<?= $chat_text; ?>')
		.attr({
			  id: 'chat_text_<?= $chat_user_id; ?>',
			  className: 'chat_text'
		})
		.appendTo('#chat_box');
});

Your approach was more clean, but it has compatibility issues with IE(http://api.jquery.com/jQuery/)

[GliderPilot]

Still not working for some odd reason.... here is the output in the page source:

<div class="chat_box" id="chat_box">
  &nbsp; 
</div>

<div class="chat_bar" id="chat_bar">
  &nbsp;
</div>        
 


      <script type="text/javascript">  

        $(function() // document ready
	{
	  $('<div/>') // create div 
		    .html('GpCapt(AF) Chris Dulong') // set html content
		    .attr({ 
			  id: 'chat_name_52',
			  className: 'chat_name'
		    })
		    .appendTo('#chat_bar'); // append to chat box

	  $('<div/>')
		    .html('Hello')
		    .attr({
			  id: 'chat_text_52',
			  className: 'chat_text'
		    })
		    .appendTo('#chat_box');
        });   
      </script>
          <script type="text/javascript">  

        $(function() // document ready
	{
	  $('<div/>') // create div 
		    .html('NE(AF) James Magill') // set html content
		    .attr({ 
			  id: 'chat_name_1722',
			  className: 'chat_name'
		    })
		    .appendTo('#chat_bar'); // append to chat box

	  $('<div/>')
		    .html('Hey')
		    .attr({
			  id: 'chat_text_1722',
			  className: 'chat_text'
		    })
		    .appendTo('#chat_box');
        });   
      </script>
    

</body>

</html>

[GliderPilot]

It looks like my   was causing the DIV's to actually load off the visible portion of the screen. Always something silly. Thanks for the input, got it working now :)