html - Creating multiple divs within a single div with jQuery -

if have parent div:

<div class="large-9 columns"></div> 

and want create multiple child divs within parent:

<div class="large-9 columns">     <div>json data point 1</div>     <div>json data point 2</div>     <div>json data point 3</div> </div> 

how go achieving current implementation:

$(document).ready(function() {     $(document).bind("ajaxsuccess", "form.message_form", function(event, xhr, settings) {         var $messages = $(".messages");         $('<div class="large-3 columns">').prepend($('<img>', { id: 'avatar', src: xhr.responsejson.sender_avatar })).appendto($messages);         $('<div class="large-9 columns">')             .append('<div>').html(xhr.responsejson.content)             .append('<div>').html('sent ' + xhr.responsejson.sender_name)             .append('<div>').html('sent @ ' + xhr.responsejson.created_at)             .appendto($messages);         $('#message_content').val('');     }); }); 

at moment xhr.responsejson.created_at being rendered , not other 2 data points?

the issue because append() new div elements, don't give them content append function returns element in parent selector, not new element. overwrite html() of new .columns div each time, last value visible.

try this:

var $container = $('<div />', { class: 'large-9 columns' }).appendto($messages); $('<div />', { html: xhr.responsejson.content }).appendto($container); $('<div />', { html: 'sent ' + xhr.responsejson.sender_name }).appendto($container); $('<div />', { html: 'sent @ ' + xhr.responsejson.created_at }).appendto($container);