Bir düğmeye tıklama ile bir kutuya dinamik olarak metin kutusuna ekleme

Question

Ben bir php programcıyım. Bir kullanıcının istediği kadar çok sayıda metin kutusu (çok sayıda e-posta kimliğini girmek için) ekleyebildiği bir kullanıcı giriş formu var. , bir button.eg: tıkladıktan sonra, ilk kez ek bir metin kutusu eklenir. Düğmeye ikinci kez tıklar, başka bir metin kutusu eklenir .... vb.

Answer 1

Sen document.createElement aracılığıyla öğeleri oluşturmak ve appendChild yoluyla bir forma bunları eklemek, şöyle olabilir:

var textbox = document.createElement('input'); 
textbox.type = 'text'; 
document.getElementById('theForm').appendChild(textbox); 

(O biçim bir id = "theform" vardır varsayar, ancak başvurusunu alabilirsiniz . Form başka yollar)

bir etiket onu sarmak istiyorsanız, bu da kolay:

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); 

Live example

DOM spesifikasyonları etrafında tekme atıyorsanız (DOM Core 2, şu anda en yaygın olarak desteklenmektedir; HTML stuff onun üstünde; DOM Core 3, sen

Çoğu zaman, size innerHTML kullanabilirsiniz vb ziyade sonuna ekleyerek daha ortada forma inserting gibi   — yapabileceğiniz diğer şeyler bulacaksınız) şimdi bazı destek oluyor DOM yapılarına ekle (her büyük tarayıcı tarafından desteklenir ve HTML5'in bir parçası olarak standart hale getirilir), ancak form alanlarının etrafında bazı tarayıcı tuhaflıkları vardır, bu nedenle yukarıdaki DOM arabirimine gittim.

---

Kitaplık kullandığınızı söylemediniz ve bu nedenle yukarıdakiler salt JavaScript + DOM. Oldukça basit, ancak gerçek dünyada kullanımda hızlıca komplikasyonlara girebilirsiniz. Burada, jQuery, Prototype, YUI, Closure veya any of several others gibi bir JavaScript kitaplığının size zaman kazandırarak, sizin için gerçekten ne yapmaya çalıştığınıza odaklanmanıza izin vererek, sizin için tarayıcı farklılıkları ve karmaşıklıkları üzerinde düzeltme yapabilirsiniz.

Örneğin, bağlantılı örnekte, IE öncesinde IE9 yerine attachEvent kullanırken, bazı tarayıcılar (standardize) addEventListener işlevini kullanın gerçeğini işlemek için bir hookEvent işlevi sağlamak zorunda kaldı. Ve kütüphaneler böyle, düz HTML kullanarak alanlarını belirlemek için izin bahsettiğim form alan tuhaflıklar idare edecek:

jQuery kullanma:

$("#theForm").append("<label>Another email address: <input type='text'>"); 

Live example

Prototype kullanma:

$("theForm").insert("<br><label>Another email address: <input type='text'>");