从Javascript动态创建HTML页面

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

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

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

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

编辑：我的目标是新创建的页面也应在创建时

2012-03-07 ParthPatel

当然。您可以使用Javascript创建完整的DOM树。开始阅读[这里]（http://reference.sitepoint.com/javascript/Document）。但我想你的问题是，如果有一个图书馆，使这个简单和可维护？ – 2012-03-07 12:42:34

是的，可以使用javascript将新元素添加到页面。 – arunes 2012-03-07 12:42:40

我的目标是新创建的页面也应该在创建时保存在服务器上 – ParthPatel 2012-03-07 12:51:42

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

你有两个选择：

与新的内容创建新的窗口 - 一旦关闭它将会消失，因为你不能把它保存到服务器，但对于所有其他事项它将作为真正的HTML页面。

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

来源

2012-03-07 12:43:42

你低估了Javascript。 OP不问如何在服务器上创建一个新的HTML文件。 – 2012-03-07 12:44:06

**创建新的HTML页面** - 对不起，对我来说，这听起来像他要求在服务器上创建新的HTML文件。 – 2012-03-07 12:47:19

OP想要什么（动态创建用户可以发布的控件）不需要在服务器上创建文件。只要你有服务器上的东西，你可以发布_to！_ – 2012-03-07 12:51:07

更新：

您已经添加评论你的问题：

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

那完全改变你的问题。要在服务器上创建一个文件，您必须使用服务器端语言（可能是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); 
    } 
    } 

})();

来源

2012-03-07 12:44:12

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

退房jquery

来源

2012-03-07 12:46:44 joidegn

下面是一些原油一步就可以做到这一点（只有当你的是普通的.html页面）

添加一个空白div来你的HTML页面如<div id="page"></div>（全部为控件将被添加到此容器中）。
捕获用户将控制信息输入到一些变量中。
for循环在运行一个（计数可基于控制用户的数目来计算希望） $('#page').html(\\plain html code to add controls)

来源

2012-03-07 12:49:51 Misam

从Javascript动态创建HTML页面

回答

相关问题