Add content to sibling div

Question

In the example below what's the simplest addContent function that will put some content into the child div?

<div>
    <a href="javascript:addContent();">My Link</a>
     <div/>
</div>

Clicking the link should result in:

<div>
    <a href="javascript:addContent();">My Link</a>
     <div>Added Content</div>
</div>

Answer 1

Take a look at next:

$(document).ready(function() {
    $(".addContent").click(function(e) {
        e.preventDefault();
        $(this).next("div").html("<div>Added Content</div>");
    });
});

Instead of using an inline function, give your 'add content' links a class, and bind to anchors with that class as in the above example:

<a class="addContent" href="#">My Link</a>

Try a demo here: http://jsfiddle.net/wGz8s/1/