how to put if condition in jquery's append function

Question

i have trapped in a jquery function, all i want is to append some divs using jquery's append function, but the problem is that i want to put some if conditions in this function,

here is my working code without condition

$( "#some-div-container" ).append( 
                                  "<div>name 1" +
                                      "<a href=\"#\">" +
                                           "<div id=\"add\">Add</div>" +
                                      "</a>" +
                                      "<div>Available</div>" +
                                  "</div>"
                                );

i am using jquery's ajax function having some json response, so i want just that, let say if(response == 1) then execute the code inside it, i am trying using condition,

 $( "#some-div-container" ).append( 
                                  "<div>name 1"
                                  if(response == 1) {    
                                     +"<a href=\"#\">" +
                                           "<div id=\"add\">Add</div>" +
                                      "</a>"
                                  }
                                      + "<div>Available</div>" +
                                  "</div>"
                                );

is it possible? Any help will be appreciated, an error occured when i put this condition "my some other javascript function is not defined", works perfect without condition

Answer 1

Build your string beforehand, by using a variable:

var elements = "<div>";
if (someCondition) {
  elements += "<a href='#'>some link</a>";
}
elements += "</div>";

Or, a more specific example:

var elements = "<div>name 1";
if(response == 1) {    
  elements += 
    "<a href='#'>" +
      "<div id='add'>Add</div>" +
    "</a>";
}
elements += "<div>Available</div>";
elements += "</div>";

Then append the resulting string:

$("#some-div-container").append(elements);

Answer 2

You could acheive that in the following manner:

$('#some-div-container').append(
    '<div>name 1' + 
    (response == 1 ? '<a href="#"><div id="add">Add</div></a>' : '') +
    '<div>Available</div></div>'
);

Demo

But I think it would be neater to do something like this

var div = $('<div/>', { text: 'name 1' });
if(response == 1) {
    div.append($('<a/>', { href: '#' }).append($('<div/>', { id: 'add', text: 'Add' })));
}
$('<div/>', { text: 'Available' }).appendTo(div);
div.appendTo('#some-div-container');

Demo