Question

My dom looks like:

<div id="foo">
</div>
<ul>
 <li>...</li>
 <li>..</li>
</ul>

I’m performing some operations with the ‘#foo’ div and would like to test if a <ul> element exists directly after it. If it does, then I’d like to append an <li> to it. If it doesn’t I want to create a <ul> append an <li> to it and then place it directly after the div.

Is there a way I can do this in jquery?

Answer 1

Like this:

$(document).ready(function() {
    var $foo = $('#foo'), 
        $ul = $foo.next('ul');

    if ($ul.length) {
        // <ul> exists; add a <li> to it
        $ul.append('<li></li>');
    } else {
        // <ul> does not exist; create one, add a <li> to it,
        // then insert it after #foo
        $foo.after('<ul><li></li></ul>');
    }
});

For reference:

• .next() grabs the sibling that immediately follows a given element in its parent. The jQuery call $('#foo').next('ul') works similarly to the selector #foo + ul.

• The difference between .append() and .after() is that .append() adds elements into the end of an element’s contents, while .after() adds them directly after its closing tag.