jQuery是一個為JavaScript編寫的快速、小巧和特性豐富的庫。而它的clone方法可以拷貝指定元素并復制它的所有數據和事件處理函數。那么結合表單,我們可以在添加新用戶的時候,復制一個相同的表單,用于添加多個用戶信息。
// HTML結構
<form id="user-form">
<div class="user">
<input type="text" name="username" placeholder="username">
<input type="password" name="password" placeholder="password">
</div>
<button type="button" id="add-user-btn">Add user</button>
</form>
// JavaScript代碼
$(document).ready(function() {
// 找到按鈕并添加點擊事件
$('#add-user-btn').click(function() {
// 找到最后一個用戶并復制它
var $lastUser = $('.user').last();
var $newUser = $lastUser.clone();
// 將新用戶插入到表單中
$newUser.insertAfter($lastUser);
});
});
這樣我們就可以通過點擊“Add user”按鈕來動態的添加新的用戶信息表單。而不需要手動復制和粘貼。當然,我們也可以使用clone()方法來實現其他相似的功能。