Tôi là người lập trình php. Tôi có biểu mẫu nhập người dùng trong đó một người sẽ có thể thêm nhiều hộp văn bản (để nhập id email muliple) , bằng cách nhấp vào nút.eg:He nhấp vào nút lần đầu tiên một hộp văn bản bổ sung được thêm. Nhấp vào nút lần thứ hai, một hộp văn bản khác được thêm vào .... v.v.tự động thêm hộp văn bản vào biểu mẫu bằng cách nhấp vào nút
Bạn có thể tạo các yếu tố qua document.createElement, và gắn nó vào một biểu mẫu qua appendChild, như vậy:
var textbox = document.createElement('input');
textbox.type = 'text';
document.getElementById('theForm').appendChild(textbox);
(Đó là giả định các hình thức có id = "theForm", nhưng bạn có thể nhận được các tài liệu tham khảo để . hình thức cách khác)
Nếu bạn muốn quấn nó trong một nhãn, đó là dễ dàng, quá:
var label, textbox;
label = document.createElement('label');
label.appendChild(document.createTextNode('Another email address: '));
textbox = document.createElement('input');
textbox.type = 'text';
label.appendChild(textbox);
document.getElementById('theForm').appendChild(label);
Nếu bạn đá xung quanh thông số kỹ thuật DOM (DOM Core 2 được hỗ trợ rộng rãi nhất hiện nay, như là HTML stuff trên đầu trang của nó; DOM Core 3 là nhận được một số hỗ trợ bây giờ), bạn sẽ tìm thấy những điều khác mà bạn có thể làm — như inserting thành dạng ở giữa chứ không phải phụ thêm vào cuối, vv
Hầu hết thời gian, bạn có thể sử dụng để innerHTML thêm vào các cấu trúc DOM (nó được hỗ trợ bởi mọi trình duyệt chính và được chuẩn hóa như một phần của HTML5), nhưng có một số trình duyệt quirks xung quanh các trường biểu mẫu, cụ thể, đó là lý do tại sao tôi đã đi với giao diện DOM ở trên.
Bạn chưa từng nói mình đang sử dụng thư viện, do đó, trên đây là JavaScript + DOM thuần túy. Nó khá đơn giản, nhưng trong thế giới thực, bạn có thể nhanh chóng chạy vào các biến chứng. Đó là nơi thư viện JavaScript như jQuery, Prototype, YUI, Closure hoặc any of several others có thể giúp bạn tiết kiệm thời gian, làm mịn sự khác biệt của trình duyệt và các biến chứng cho bạn, cho phép bạn tập trung vào những gì bạn đang thực sự cố gắng thực hiện. Ví dụ, trong ví dụ được liên kết, tôi phải cung cấp một hàm hookEvent để xử lý thực tế là một số trình duyệt sử dụng chức năng addEventListener (tiêu chuẩn hóa), trong khi IE trước IE9 sử dụng attachEvent thay thế. Và thư viện sẽ xử lý những khuyết tật trường mẫu tôi đã nói về, cho phép bạn xác định các lĩnh vực của bạn sử dụng HTML thẳng, như thế này:
Sử dụng jQuery:
$("#theForm").append("<label>Another email address: <input type='text'>");
Sử dụng Prototype:
$("theForm").insert("<br><label>Another email address: <input type='text'>");