0

I'm building an app that allows the user to create an HTML page. When the user downloads their page I take all the HTML within the canvas div and save it as an HTML file, containing their page elements.

Now the problem is that I need to find a way to wrap the page with like this before they download.

Before Download

<div id="page-area">
   // PAGE ELEMENTS
</div>

Result After Download

<html>

<head>
  <title>page</title>

  <head>

    <body>
      // PAGE ELEMENTS
    </body>

</html>

What's the best way to wrap multiple elements with HTML, head, body, and other basic HTML structure tags? Looking for a jQuery solution or raw JavaScript.

So for example if I could take all of these elements

<ul>
  <li>List</li>
</ul>

<div id="tabs">
  <span>test</span>
  </tabs>

And wrap then with the basic HTML structure like this

<html>

<head>
</head>

<body>
  <ul>
    <li>List</li>
  </ul>
  <div id="tabs">
    <span>test</span>
    </tabs>
</body>

</html>

How would I do that with jQuery?

double-beep
  • 5,031
  • 17
  • 33
  • 41
UserDy
  • 327
  • 5
  • 22
  • 2
    Why don't you go check this out. appendTo http://api.jquery.com/appendto/ – hina10531 Dec 08 '14 at 17:33
  • Possible you are looking for [this](http://stackoverflow.com/questions/19033011/downloading-the-content-of-a-div-as-a-separate-html-file). Append your data as said by above user that download it. – Abs Dec 08 '14 at 17:51

1 Answers1

1

Here is a working jsFiddle for code reference.

HTML:

<div id="content">
    <h1>Hello</h1>
    ...
</div>

JS:

var a = document.body.appendChild(document.createElement("a"));    
a.download = "export.html";
html = "<html><head></head><body>" 
html += document.getElementById("content").innerHTML;
html += "</body></html>" 
a.href = "data:text/html," + html;
a.innerHTML = "[Download HTML]";
Dave
  • 4,376
  • 3
  • 24
  • 37
  • Works great. Now if only theres some sort of plugin that can properly indent and organize the code because currently it looks like this. – UserDy Dec 08 '14 at 20:19