पर क्लिक करके गतिशील रूप से टेक्स्टबॉक्स को जोड़ना। मैं एक php प्रोग्रामर हूं। मेरे पास एक उपयोगकर्ता इनपुट फॉर्म है जिसमें एक व्यक्ति को कई टेक्स्ट बॉक्स (बहु ईमेल आईडी दर्ज करने के लिए) जोड़ना चाहिए क्योंकि वह चाहता है , बटन के क्लिक से .eg: वह पहली बार बटन पर क्लिक करता है, एक अतिरिक्त टेक्स्ट बॉक्स जोड़ा जाता है। वह दूसरी बार बटन क्लिक करता है, एक और टेक्स्ट बॉक्स जोड़ा जाता है .... और इतने पर और आगे।बटन
तुम इतनी तरह document.createElement के माध्यम से तत्व बना सकते हैं और appendChild के माध्यम से फ़ॉर्म के लिए उन्हें संलग्न,:
var textbox = document.createElement('input');
textbox.type = 'text';
document.getElementById('theForm').appendChild(textbox);
(यही कारण है कि मान लिया गया प्रपत्र एक id = "theForm" है, लेकिन आप के संदर्भ में प्राप्त कर सकते हैं । प्रपत्र अन्य तरीकों)
आप एक लेबल में लपेट चाहते हैं, कि आसान है, भी:
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);
यदि आप डोम चश्मा के आसपास लात मारते हैं (DOM Core 2 वर्तमान में सबसे व्यापक रूप से समर्थित है, जैसा कि HTML stuff इसके शीर्ष पर है; DOM Core 3 अब कुछ समर्थन मिल रहा है), तो आप अन्य बातों के आप बल्कि अंत करने के लिए जोड़कर से बीच में प्रपत्र में — inserting की तरह कर सकते हैं, आदि
अधिकांश समय, आप innerHTML का उपयोग कर सकते हैं डीओएम संरचनाओं में जोड़ें (यह हर प्रमुख ब्राउज़र द्वारा समर्थित है, और एचटीएमएल 5 के हिस्से के रूप में मानकीकृत हो रहा है), लेकिन फॉर्म फ़ील्ड के आसपास कुछ ब्राउज़र क्विर्क हैं, विशेष रूप से, यही कारण है कि मैं उपरोक्त डीओएम इंटरफ़ेस के साथ गया हूं।
आपने नहीं कहा है कि आप एक पुस्तकालय का उपयोग कर रहे हैं, और इसलिए उपरोक्त शुद्ध जावास्क्रिप्ट + डोम है। यह काफी सरल है, लेकिन असली दुनिया में उपयोग में आप जटिलताओं में तेजी से भाग सकते हैं। यही वह जगह है जहां एक जावास्क्रिप्ट लाइब्रेरी jQuery, Prototype, YUI, Closure, या any of several others आपके लिए ब्राउज़र अंतर और जटिलताओं पर चिकनाई कर सकती है, जिससे आप वास्तव में क्या करने की कोशिश कर रहे हैं पर ध्यान केंद्रित कर सकते हैं।
उदाहरण के लिए, जुड़ा हुआ उदाहरण में, मैं, तथ्य यह है कि कुछ ब्राउज़रों (मानकीकृत) addEventListener फ़ंक्शन का उपयोग करें संभालने के लिए एक hookEvent समारोह प्रदान करने के लिए है, जबकि आईई पहले IE9 को attachEvent बजाय का उपयोग करता था। और पुस्तकालयों, प्रपत्र क्षेत्र quirks मैं के बारे में बात कर रहा था संभाल लेंगे इस तरह, आप सीधे HTML का उपयोग कर अपने खेतों निर्दिष्ट करने की अनुमति:
jQuery का उपयोग करना:
$("#theForm").append("<label>Another email address: <input type='text'>");
Prototype का उपयोग करना:
$("theForm").insert("<br><label>Another email address: <input type='text'>");