Question

我正在构建一个允许用户创建HTML页面的应用程序。当用户下载他们的页面时，我将获取canvas div中的所有HTML并将其保存为包含其页面元素的HTML文件。

现在的问题是我需要找到一种在下载之前用这样包装页面的方法。

下载前

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

下载后的结果

<html>

<head>
  <title>page</title>

  <head>

    <body>
      // PAGE ELEMENTS
    </body>

</html>

使用HTML，head，body和其他基本HTML结构标记包装多个元素的最佳方法是什么？寻找jQuery解决方案或原始JavaScript。

所以，例如，如果我可以采取所有这些元素

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

然后使用像这样的基本HTML结构包装

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

我如何用jQuery做到这一点？

Answer 1

以下是代码参考的工作jsFiddle。

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]";

HTML包装方法

1 个答案: