在前端开发中，经常需要动态地添加输入元素（如输入框、下拉菜单等）来实现用户交互。本文将介绍如何使用 JavaScript 和 jQuery 来实现动态添加输入元素，并提供示例代码。
HTML 结构
首先，我们需要准备一个 HTML 页面，用于放置动态添加的输入元素。例如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------
---- ---------------------
---- ------------ ---
------
------- -----------------------------
-------
-------其中，<div id="input-container"> 用于放置动态添加的输入元素，<button id="add-input"> 则是用于触发添加输入元素的操作。
JavaScript 实现
接下来，我们可以使用 JavaScript 或 jQuery 来实现动态添加输入元素的功能。以下是使用 JavaScript 的示例代码：
-- -------------------- ---- ------- ----- --------- - ------------------------------------------- ----- --------- - ------------------------------------- --- ---------- - -- ----------------------------------- ---------- - ----- ----- - -------------------------------- ---------- - ------- ---------- - ---------------------- ----------------------------- ------------- ---
以上代码中，我们首先获取了 input-container 和 add-input 两个元素的引用，并且定义了一个计数器 inputCount 来记录添加的输入元素数量。
当用户点击 add-input 按钮时，我们创建一个新的 <input> 元素，设置其类型为文本框，并为其命名，然后将其添加到 input-container 容器中。同时，我们还会将 inputCount 计数器加 1，以便下一次添加时能够使用不同的名称。
jQuery 实现
如果您想要使用 jQuery 实现以上功能，可以尝试以下代码：
-- -------------------- ---- -------
----- --------- - ----------------------
----- --------- - ----------------
--- ---------- - --
--------------------- ---------- -
----- ----- - -------------------
----- -------
----- ---------------------
---
------------------------
-------------
---在上述代码中，我们使用了 $ 函数来获取 input-container 和 add-input 两个元素的引用，并且同样定义了一个计数器 inputCount。
当用户点击 add-input 按钮时，我们使用 $('<input>') 创建一个新的输入元素，并使用 .attr() 方法来设置其类型和名称，然后使用 .append() 方法将其添加到 input-container 容器中。最后，我们也会将 inputCount 计数器加 1。
总结
通过以上示例代码，我们学习了如何使用 JavaScript 和 jQuery 来实现动态添加输入元素的功能。在实际开发中，我们可以根据需要自定义输入元素的类型、名称和样式，从而满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24171