Question

var $imageicon = $('<image/>');
 $imageicon.attr('src', '../../Content/images/ReplyIcon.png');
 $imageicon.addClass('replyIcon');
 var $table = $('<table/>').addClass('replyContent');
 $table.attr('id', 'replyArea');
                
 $table.append(
                         $('<tr>').append($('<td>').append($imageicon).addClass('replyIcontd'), $('<td>').text('hii'))
      );
 $("#container").append(
               $('<div/>')
                  .attr('id', 'replytopost')
                  .append($table)
            );

css

.replyIcontd
{
   width:5%;
   
}

table is showing up but i waent to reduce space between hii and image I am trying to reduce the width to 5% but I am unable to do it
I the image hii is one td and ok is one td .I want both of them to come side by side

Answer 1

You forgot to give closing / on the elements you created dynamically.

 $('<tr />').append($('<td />').append($imageicon).addClass('replyIcontd'), $('<td />').text('hii'));

---

Update
I made some pretty big changes on your script, with a proper way to do this.

 var $imageicon = $('<img />', {
     'src' : '../../Content/images/ReplyIcon.png',
     'class' : 'replyIcon'
 });

 var $table = $('<table/>', {
     "class" : "replyContent",
     "id" : "replayArea",
     'html' : $('<tr />', {
                 'html' :  $('<td />', {
                     'class': 'replyIcontd',
                     'html' : $imageicon
                 }).html()+$("<td />", {
                     'text' : 'hii'
                 }).html()                     
              })

 });

Demo