jQuery "get or create element" convenience method

Question

I have two functions that generate DOM elements. They both attempt to create the same container element. (I'd prefer not to enforce a specific run order for these functions, or tightly couple them to the side-effect of creating this element). I've been trying to discover a method that would get an element if it exists, or create a single instance of it if it doesn't, and return a jQuery object containing that element or all the matched elements if they already exist.

I haven't found this to exist in searching through jQuery documentation, but I thought I'd ask here to see if anyone else has encountered a similar problem and has suggestions.

Answer 1

You can use this poorly written code:

var $element = $('#element').length ? $('#element') : $('<div id="element"></div>').appendTo('#containerToPutIt');

Or make it a bit cleaner:

var $element = $('#element');
if(!$element.length)
    $element = $('<div id="element"></div>').appendTo('#containerToPutIt');

Answer 2

There isn't really a place in jQuery where you are guaranteed to have enough information to create an element if it doesn't exist. For example, if you do $('#something'), and you want jQuery to ensure it exists, what element do you expect jQuery to create? Where do you want it located in the DOM?

It's something you should be doing yourself with a helper method:

function getContainer() {
    var container = $('.yourContainer');

    if (!container.length) {
        container = $('<div class="container" />').appendTo('#something');
    }

    return container;
}

And then use it like this:

getContainer().html('Foo Bar Baz');
getContainer().children().each(..);

Answer 3

You can just select the DOM element in jQuery and then test its length:

if ($('div.someclass').length > 0) {...}

Do NOT test for the existence of the jQuery object, since it will always return true even if there are no DOM elements inside of it. You must always test its length.

If the length test fails, you can then create the DOM element wherever you want using some appropriate DOM insertion method.

Answer 4

Hmm... interesting question... You might try something like.

function checkExists(selector) {
    var exists = $(selector).length;
    if(exists > 0) {
        return $(selector);
    } else {
        return createElement();
    }
}

Where createElement() would be your function that makes the DOM element you are looking for. (It would return the newly created element) Then you can call it with a jquery selector like checkExists('.myClass'); for example