jQuery.append nothing - ternary operator

Question

I have a web page which, depending on some boolean flags, will append various elements to a HTML page.

To make the code concise, I try to use ternary operators wherever I can - in order to save loads of if statements.

However, I am wondering what best practice is, when using a ternary operator, to append no elements (if that makes sense) to a dynamically created element, if my ternary operator fails. I.e.:

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : /*What here???*/)
);

Three solutions I have are as follows, but I do not know which one is the best and whether I should avoid any:

Appending an empty jQuery object - which seems the right way to do it, since it means both outcomes are the jQuery object type:

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : $())
);

An empty string, which seems wrong anyway since they're not the same type:

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : '')
);

Append null - which seems logical, but I do not want to cause any type of error:

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : null)
);

So which is best would you say?

Answer 1

However, I am wondering what best practice is, when using a ternary operator, to append no elements

Best practice would be not to use a ternary operator for a situation where it's not appropriate. If you don't know what goes in the third operand, it's clear that the situation isn't a good fit for using a ternary operator.

While you can use a blank string:

$('<div>').append(
    (myBooleanFlag ? '<p>Some child element</p>' : '')
);

...it's much clearer, just as concise, and more efficient to use the if:

if (myBooleanFlag) {
    $('<div>').append('<p>Some child element</p>');
}

I hesitate to mention it, but another JavaScript idiom that applies here is using the && operator and the expression statement:

myBooleanFlag && $('<div>').append('<p>Some child element</p>');

This is possible because in JavaScript, an expression can be a statement. Since && is short-circuited, if myBooleanFlag is falsey, the append call is not triggered.

Some people really love that syntax. Others find it hard to read and debug. It's basically a hidden if in this form:

if (myBooleanFlag) $('<div>').append('<p>Some child element</p>');

...which falls afoul of all the usual coding convention things about always using {} with conditionals, etc. But again, it's a style thing.

---

Side note: You can just use the string in the positive case above, no need to use $(...) on it before passing it to append, so I've left it out in the above.

Side note 2: There's no need to put parens around the conditional when passing it as an argument to a function.

Answer 2

var result =  myBooleanFlag ? $('<p>Some child element</p>') : null;

$('<div>').append(result);

Answer 3

You can just use an if statement instead:

if(myBooleanFlag ){
    $('<div>').append('<p>Some child element</p>');
}

Answer 4

1) appending div with $(), will give error due to you give no object inside bracket

2) appending div with '' is the correct way .

3) appending div with null is not correct way because null is also consider as string

so use second one

Answer 5

I would not suggest a ternary operator here.

Whatever is the value of your myBooleanFlag you will always call the append() method, even when it is not necessary at all. So why would you call the jQuery function twice even if you have nothing to append?

A straight if statement is enough for your purpose (and it's more readable)

if (myBooleanFlag){
    $('<div>').append('...');
}

---

if you want an alternative shorter syntax (even shorter than the ternary operator) you may instead use this expression/statement

myBooleanFlag && $('<div>').append('...');

the append() will be executed only if myBooleanFlag is true, so jQuery won't be called when the flag is false.