从Javascript动态创建HTML页面

Question

有没有一种方法可以根据用户输入从Javascript创建新的HTML页面？

我有一个网页，询问用户想要哪个输入字段，根据选择它应该创建一个新的HTML页面。

即，如果我选择3个文本框和1个按钮，则它应使用3个文本框和1个按钮创建新的HTML页面 。

如何使用PHP做同样的事情？

编辑：我的目标是新创建的页面也应在创建时保存在服务器上

Answer 1

更新 ：

您已对问题添加评论：

我的目标是新创建的页面也应在创建时保存在服务器上

那完全改变了你的问题 。 要在服务器上创建文件，您必须使用服务器端语言（可以是JavaScript，可以通过NodeJS或Rhino或其他几个项目使用JavaScript），也需要在客户端上使用JavaScript。 您需要将用户的选择发布到服务器上并在那里生成文件。

---

原始答案 ：（ 在上面的评论之前）

是的，你可以这么做。 您可以向他们显示一个页面，让他们做出选择，然后用他们要的内容替换该页面的内容，或者您​​可以打开一个新窗口并在其中显示他们的选择。

无论哪种情况，您都可能会使用DOM：

• DOM2核心规格
• DOM2 HTML规范
• DOM3核心规格
• HTML5 Web应用程序API

...和/或一个不错的JavaScript库，例如jQuery ， Prototype ， YUI ， Closure或其他几种 JavaScript库，以帮助缓解浏览器差异并提供重要的实用程序功能。

这是一个仅使用DOM和JavaScript的极简示例（不使用任何库，但是我强烈建议您使用一个，代码会更精简和更健壮）：

实时复制 | 现场直播

HTML：

<div id="question">
<label>How many text boxes would you like?
<select id="numboxes">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" selected>Three</option>
</select></label>
<input type="button" id="btnGo" value="Go">
</div>

JavaScript：

(function() {

  document.getElementById("btnGo").onclick = genPage;

  function genPage() {
    var sel = document.getElementById("numboxes"),
        num = parseInt(sel.options[sel.selectedIndex].value, 10),
        counter,
        box;

    document.getElementById("btnGo").onclick = "";
    document.body.removeChild(document.getElementById("question"));
    for (counter = 0; counter < num; ++counter) {
      box = document.createElement('input');
      box.type = "text";
      document.body.appendChild(box);
    }
  }

})();

Answer 2

不，仅使用基于浏览器的代码是不可能的。 浏览器中的代码在客户端计算机上运行。 它本身无法将文件保存在服务器上。 您将不得不在服务器上使用一些代码来实现此目的。

您有两种选择：

1. 使用新内容创建新窗口-一旦关闭，它将消失，因为您无法将其保存到服务器，但是对于所有其他事项，它将充当真实的HTML页面。

2. 使用简单的服务器端逻辑，您可以使用AJAX与之交互并创建页面。

Answer 3

有几种方法可以实现此目的。 一种方法是简单地使用已有的模板或页面创建机制从服务器动态创建页面。 您可以将jquery或zeptojs用于ajax请求，然后使用从服务器返回的新元素重新加载当前页面。 另一种方法是创建一个js（jQuery和类似的库对此类东西很有用）函数，该函数在单击Submit按钮后更改html元素。

签出jQuery

Answer 4

下面是您可以实现此目的的一些粗略步骤（仅当您的页面是纯HTML时）

1. 在您的html页面中添加一个空白div，例如<div id="page"></div> （所有控件都将添加到此容器中）。
2. 将用户输入的控制信息捕获到一些变量中。
3. 运行for循环（可以根据用户想要的控件数来计算数量） $('#page').html(\\\\plain html code to add controls)