Question

有没有办法根据用户输入从Javascript创建新的HTML页面？

我有一个网页，询问用户想要哪些输入字段，具体取决于它应该创建一个新的HTML页面。

即。如果我选择了3个文本框和1个按钮，那么它应创建新的HTML页面，包含3个文本框和1个按钮。

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

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

Answer 1

<强>更新：

您已在问题中添加评论：

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

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

原始回答：（上述评论之前）

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

在任何一种情况下，您可能都使用DOM：

...和/或一个好的JavaScript库，例如jQuery，Prototype，YUI，Closure或any of several others，以帮助平滑浏览器差异并提供重要的实用功能。

这是一个仅使用DOM和JavaScript的极简主义示例（没有库，但我强烈建议使用一个，代码更精简，更强大）：

Live copy | Live source

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

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

您有两种选择：

使用新内容创建新窗口 - 一旦关闭它就会消失，因为您无法将其保存到服务器，但对于所有其他事项，它将充当真正的HTML页面。
使用简单的服务器端逻辑，您可以使用AJAX与其进行交互并创建页面。

Answer 3

有几种方法可以实现这一目标。一种方法是使用您使用的任何模板或页面创建机制从服务器动态创建页面。你可以用例如jquery或zeptojs用于ajax请求，然后使用从服务器返回的新元素重新加载当前页面。另一种方法是创建一个js（jquery和类似的库对这个东西有用）函数，它在单击提交按钮后更改html元素。

查看jquery

Answer 4

以下是一些粗略的步骤，你可以实现这一点（只有你的是普通的.html页面）

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

从Javascript动态创建HTML页面

4 个答案: