動態產生輸入表單元素

根據使用者輸入動態調整網頁內容，增強使用者體驗。在這種情況下，建立特定數量的輸入表單元素是可以使用 JavaScript 實現的任務。

要從文字欄位檢索使用者的輸入，需要一個 onclick 事件處理程序。此處理程序從欄位中收集值，並透過唯一的 ID 屬性進行識別。

下一步涉及建立一個容器元素來保存動態產生的元素。透過利用 JavaScript 的 document.createElement()，可以使用appendChild() 建立新元素並將其附加到容器。設定有意義的屬性（例如名稱和值）對於在表單中提交這些元素至關重要。

為了更清晰，可以使用 document.createElement('br') 插入換行符號。或者，document.createTextNode() 適合簡單地顯示文字。

為了防止容器中出現冗餘元素，可以使用hasChildNodes() 實作對現有子節點的檢查，然後使用removeChild() 刪除它們.

範例程式碼片段示範了這些技術：

function addFields(){
    // Get the number of fields from the user input
    var number = document.getElementById("member").value;
    // Get the container where the inputs will be added
    var container = document.getElementById("container");
    // Remove any existing child nodes
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    // Add the specified number of input fields
    for (i=0;i<number;i  ){
        // Create a new text node
        container.appendChild(document.createTextNode("Member "   (i 1)));
        // Create a new input field
        var input = document.createElement("input");
        input.type = "text";
        input.name = "member"   i;
        container.appendChild(input);
        // Add a line break
        container.appendChild(document.createElement("br"));
    }
}

透過整合這些原則，您可以動態建立所需數量的輸入表單元素，方便使用者資料輸入並增強 Web 應用程式的整體功能。