從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頁面

回答

相關問題