JQuery load variable stored html into a div

Question

Friends,

I have a simple page. I have a div (let's call it #content) which contains content (in html) that I want to store into a variable.

<div id="content">
   <div id="left">
      <h1>Cool title</h1>
      <p>text</p>
   </div>
   <div id="right">
      <p>more text</p>
   </div>
</div>

I then have a div which is binded to a click function through JQuery. When clicked, it stores the content of #content into a variable, storedHTML, and the height to storedHeight. It then sets the height of #content to 0 and deletes the html within #content.

Then when clicked again it animates the height back to the storedHeight, let's say 200px; it also reloads the html back into the div.

The problem lies in reloading the html into the div. How do I go about doing this? I've tried:

storedHTML = $('#content').html(); //to store it
$('#content').html(''); //to clear it 
$('#content').html(storedHTML); //to load it back up again

tries to load it...but to no avail.

This worked perfectly when I first wrote it to grab text from a p tag, minimize it, and then enlarge it back up again. E.g.:

storedText = $('p#example').text(); //to store it
$('p#example').text(''); //to clear it
$('p#example').text(storedText) //to load it back up again

For the purpose of this html load, I have tried using .html(), .text(), .data(), .load(). and a combination of .html() and .append()

I'm clearly failing. I can't figure out how to load html (multiple divs and such) back into this div. I would love to learn the proper way to do this!

Thank you kindly for all your continued help friends.

Can you please create a fiddle illustrating the problem? (This might be a $(document).ready related issue — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Mar 8, 2013 at 2:10
I'm working on the fiddle now. I don't think it's a document.ready issue, the variable storedHTML was populated correctly in the console. Also the previous use of this, with just plain .text(), worked fine... The issue is just in loading the html back into the div... — Jaime
– Jaime, Commented Mar 8, 2013 at 5:10

Matt · Accepted Answer · 2013-03-08 06:01:53Z

1

Have you tried using .hide() and .show()?

$('#content').hide();
$('#content').show();

You can see a bunch of examples and documentation here also: http://api.jquery.com/hide/

Also, even though your approach is not the best, it should still work. I'm not sure why you're having problems, but the code below worked fine for me:

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
</head>
<body>
<div id="content">
   <div id="left">
      <h1>Cool title</h1>
      <p>text</p>
   </div>
   <div id="right">
      <p>more text</p>
   </div>
</div>

<input type="button" value="Hide" onclick="hideContent()" />
<input type="button" value="Show" onclick="showContent()" />

</body>
<script type="text/javascript">
    var storedHTML = '';

    function hideContent() {
        storedHTML = $('#content').html();
        $('#content').html('');
    }

    function showContent() {
        $('#content').html(storedHTML);
    }

</script>
</html>

edited Mar 8, 2013 at 6:01

answered Mar 8, 2013 at 2:11

Matt

7,01512 gold badges71 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaime Over a year ago

I have not actually! I think that might do the trick. I am however still very curious, for the purpose of learning, how I can load html that's stored in a variable into an element (div).

Matt Over a year ago

See my edited response. Paste that into a regular html file and run it.. then compare it to what you've got.

Collectives™ on Stack Overflow

JQuery load variable stored html into a div

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related