jquery - append html doesn't append the empty String inside the div

Question

I am doing a chat project in java.

Using my Server response through jquery-ajax , I am creating an html and append the html to div.

My jquery - html alert without empty string-name(note the id='user' in the alert) will be ,

after appending this in the chat area ,

After jquery-html alert with empty string-name(note the id='user' in the alert) will be ,

after appending this in the chat area ,

My jquery for creating the HTML will be ,

function send(name , message , time){
    //name = $("#name").val();
    //message = $("#message").val();

    var user = "<div id='user' class='fontStyle'>"+name+"</div>";
    var msg = "<div id='msg'  class='fontStyle'>"+message+"</div>";
    var timeStamp = "<div id='time'  class='fontStyle'>"+time+"</div>";

    var row = "<div id='msgSet' >"+ user + msg + timeStamp +"</div>";

    alert(row);
    return row;

}

There is no empty string will be present in chat area.

Hope our stack members will help me.

Answer 1

You can escape html your string so it keeps the white spaces. See details here.

Or you can trim your message string (=remove spaces at the beginning and end of it) with such an instruction, and then manualy add the spaces (with the   code inside a div, span, ...):

s.replace(/\s+/g, ' ');