CODEWITHSUNDEEP
jquery-uijquery
Irfan Ahmed
Irfan Ahmed

Reputation: 9374

how to put if condition in jquery's append function

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

Upvotes: 3

Views: 11566

Answers (5)

David Hedlund
David Hedlund

Reputation: 129792

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

Upvotes: 2

grigno
grigno

Reputation: 3198

var html;
html += "<div>name 1";
if(response == 1) {    
  html += "<a href=\"#\">";
// other code.....
}                                

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

Upvotes: 0

Grant Thomas
Grant Thomas

Reputation: 45083

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);

Upvotes: 4

Derek
Derek

Reputation: 4751

Create different strings based on the value of response, and do a single append() call with the conditioned string.

Upvotes: 0

Brewal
Brewal

Reputation: 8189

Try this :

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

Upvotes: 1

Related Questions