如何在 JavaScript 中動態產生輸入表單元素？-js教程-PHP中文網

如何在 JavaScript 中動態產生輸入表單元素？

Barbara Streisand

發布： 2024-10-28 06:38:02

原創

257 人瀏覽過

How to Dynamically Generate Input Form Elements in JavaScript?

動態建立輸入表單元素

本文深入研究了一個常見的程式設計挑戰：根據使用者輸入動態建立輸入表單元素。目標是使用 JavaScript 為初學者提供清晰、簡單的解決方案。

問題

網頁包含一個文字輸入字段，使用者可以在其中輸入數字。點擊相應的連結後，頁面應動態產生許多輸入字段，以便使用者提供附加資訊。使用者最多可以輸入 10 個值。

了解解決方案

擷取使用者輸入：
- onclick 事件處理程序應用於負責產生輸入欄位的連結。
- 在事件處理程序中，可以使用 document.getElementById() 檢索在文字輸入欄位中輸入的值。
建立容器：
- 容器元素，例如具有id 屬性的div（例如「container」），是必需的保存動態產生的輸入欄位。
動態產生元素：
- 使用 document.createElement(), new可以建立輸入元素。
- 應為每個輸入設定類型和名稱等屬性。
- appendChild() 用於將每個輸入元素附加到容器。
清除先前的元素：
- 為了防止重複，應在產生新元素之前刪除容器中的任何現有子元素。這可以使用 hasChildNodes() 和 removeChild() 來完成。
其他增強功能：
- 您可以新增元素例如換行符(document.createElement("br") ) 或文字節點(document.createTextNode()) 來改進佈局。

程式碼範例

以下程式碼片段示範了此解決方案的實作：

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Get number of inputs
            var number = document.getElementById("member").value;

            // Get container
            var container = document.getElementById("container");

            // Clear container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }

            // Generate inputs
            for (i=0;i<number;i++){
                // Text node
                container.appendChild(document.createTextNode("Member " + (i+1)));

                // Input element
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);

                // Line break
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

登入後複製

以上是如何在 JavaScript 中動態產生輸入表單元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！