Load content dynamically

Load content dynamically


I'm trying to code a JQuery function, which views the content of a second html-page in the #content-div of my main html-page, when I MouseOver the link. When I MouseOut the link the #content-div of my main html should be viewed again.

This is the code of my link in the HTML-File:

  1. <a href="" id="infojq">InfoJQUERY</a>
Code in my javascript file:
  1. $(document).ready(function()
  2. {
  3. $('#infojq').mouseover(function()
  4. {
  5. //var x = '#content'; idea here was to save div-content in x..
  6. //$('#content').load('magicpage.html');
  7. $('#content').html('magicpage.html');
  8. }
  9. );
  10. $('#infojq').mouseout(function()
  11. {
  12. //$('#content') = x; >> insert x into div..
  13.                                 //$('#content').load('index.html'); >> worked good but i only need the                                           // content from the #content-div and not the whole html-file
  14. $('#content').html('index.html');
  15. }
  16. );
  17. }
  18. );
The result now is that the div-content is replaced with the String "magicpage.html" and when I MouseOut it views the String "index.html".

My problem is that I don't know how to only read/view the content of one specific div-box in an html-file , save it somewhere if necessary and the use it again to write into a div-box.

Thanks for help in advance,