從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)