Question

Which one is the preferred method and why?

Method 1:

<p>When I'm clicked, add an image under me.</p>
<img src="/path/to/image.gif" />

$('p').hide(); // OR css display:none
$('p').click(function() {
    $('img').show();
});

Method 2:

<p>When I'm clicked, add an image under me.</p>

$('p').click(function() {
    $('<img src="/path/to/image.gif" />').appendTo('p');
});

Answer 1

In this precise case, the first solution seems better as it enables the browser to start loading the image long before the user clicks.

When you don’t have so great behavior differences, I’d suggest to keep the solution enabling you to have the cleanest and simplest code. And that will depend on much more code that what you can show us.

Even there, it might be possible that the second solution is better if it’s more coherent with a framework or your image is almost ensured to be in cache for other reasons.