Load internal div after clicking button

Question

I have an invisible div by display: none .

I need to load div after clicking on button, not OnPageLoad.

Notice :

I said LOAD div after Clicking button, i'm not talking about SHOW div.

I don't want load div on page load.

HTML is here :

<input id="btn" type="button" value="Load Div" />
<div class="content" style="display: none;">
    <img src="http://www.kippaxvet.com.au/Portals/kippaxvet/cute%20pup.jpg" />
</div>

How can i do that ?

Any ideas would be appreciated.

---

EDIT {More information} :

I have a div with many elements and images in there.

If i load that div onPageLoad it's very heavy and take long times.

I just need to Load that div when the user want show it up.

Answer 1

try this:

<input id="btn" type="button" value="Load Div" onclick="load()"/>

function load()
{
  var imgDiv = document.createElement('div');
  $(imgDiv ).addClass('content');
  $(imgDiv).append('<img id="dynamicImg" src="http://www.kippaxvet.com.au/Portals/kippaxvet/cute%20pup.jpg" />')
  // add the imgDiv to your parent container element. 
  // for e.g. $("#container").append(imgDiv)
}

JsFiddle : http://jsfiddle.net/vendettamit/QB8Hv/