नई div को गतिशील रूप से कैसे बनाएं, इसे बदलें, इसे स्थानांतरित करें, इसे हर तरह से संशोधित करें, जावास्क्रिप्ट में?

Question

मैं पेज लोड के रूप में नए div बनाना चाहता हूं। ये divs एक आदेशित समूह के रूप में दिखाई देंगे जो JSON फ़ाइल से बाहरी डेटा के आधार पर बदलते हैं। मुझे लूप के लिए ऐसा करने की आवश्यकता होगी क्योंकि 100 से अधिक डिवीजनों की आवश्यकता है।

तो, मुझे ऊंचाई, चौड़ाई, शीर्ष / बाएं और इतने पर प्रत्येक निर्मित div को बदलने में सक्षम होने की आवश्यकता है। फिर भी, document.getElementById("created_div").style.whateverकुछ भी नहीं करता है, मैं एक भी नया div दिखाई नहीं दे सकता। मैंने नए divs की ऊँचाई / चौड़ाई 500px, पृष्ठभूमि को "लाल" और इसी तरह सेट किया है, लेकिन कोई भी नया divs निश्चित रूप से दिखाई नहीं दे रहा है।

मैं क्या गलत कर रहा हूं?

Comments

आपके द्वारा divs बनाने के लिए उपयोग किए गए कोड को साझा करें

— wakooka

$ ("# box0")। परिशिष्ट ('<div id = "create_div"> </ div>');

— एरिक नेल्सन

यदि आप ऐसा किसी लूप में कर रहे हैं, तो क्या इसका मतलब है कि आप एक ही पहचानकर्ता के साथ 100 divs बनाने का प्रयास कर रहे हैं?

— इवान त्रिंबोली

ब्राउज़र कंसोल में देखें ... कोई त्रुटि? हालांकि आईडी को दोहराया नहीं जाना चाहिए ... यदि चयनकर्ता मौजूद नहीं है तो इसे डाला जाना बंद नहीं करना चाहिए और कोई त्रुटि नहीं फेंकी जाती है। अपराधियों की पहली महत्वपूर्ण जाँच होती है

— charlietfl

उन्हें बनाने के अलावा, क्या आप उन्हें DOM में सम्मिलित करते हैं?

— गैब्रियल पेट्रीओली

Answer 1

• सृष्टि var div = document.createElement('div');
• इसके अलावा document.body.appendChild(div);
• शैली में हेरफेर
  • पोजीशनिंग div.style.left = '32px'; div.style.top = '-16px';
  • कक्षाओं div.className = 'ui-modal';
• परिवर्तन
  • ईद div.id = 'test';
  • सामग्री (HTML का उपयोग करके) div.innerHTML = '<span class="msg">Hello world.</span>';
  • सामग्री (पाठ का उपयोग करके) div.textContent = 'Hello world.';
• निष्कासन div.parentNode.removeChild(div);
• एक्सेस करना
  • आईडी द्वारा div = document.getElementById('test');
  • टैग द्वारा array = document.getElementsByTagName('div');
  • वर्ग द्वारा array = document.getElementsByClassName('ui-modal');
  • CSS चयनकर्ता (एकल) द्वारा div = document.querySelector('div #test .ui-modal');
  • CSS चयनकर्ता (बहु) द्वारा array = document.querySelectorAll('div');
• संबंध (पाठ नोड्स शामिल)
  • बच्चे node = div.childNodes[i];
  • भाई node = div.nextSibling;
• संबंध (केवल HTML तत्व)
  • बच्चे element = div.children[i];
  • भाई element = div.nextElementSibling;

यह DOM हेरफेर की मूल बातें शामिल करता है। याद रखें, दस्तावेज़ के भीतर दिखाई देने के लिए नए बनाए गए नोड के लिए शरीर या शरीर में निहित नोड के अलावा तत्व की आवश्यकता होती है।

Answer 2

क्या आपने JQuery की कोशिश की है ? वेनिला जावास्क्रिप्ट कठिन हो सकती है। इसका उपयोग करके देखें:

$('.container-element').add('<div>Insert Div Content</div>');

.container-elementएक JQuery चयनकर्ता है जो वर्ग "कंटेनर-तत्व" के साथ तत्व को चिह्नित करता है (संभवतः मूल तत्व जिसमें आप अपने divs सम्मिलित करना चाहते हैं)। तब add()फ़ंक्शन HTML को कंटेनर-तत्व में सम्मिलित करता है।

Comments

खैर, मैं समझ गया। मुझे 0. से अधिक पर पैडिंग सेट करना था। भले ही इसकी ऊँचाई और चौड़ाई 64 से अधिक हो। Bleh। क्या एक बच्चे के लिए एक सामान्य तलाक की तरह काम करने का कोई तरीका है? लक्ष्य प्रत्येक div को एक कड़ी की तरह काम करना है। एक गेम वेबसाइट के लिए एक गतिशील सूची बनाने की कोशिश कर रहा है? /

— एरिक नेल्सन

मैं इस बात से सहमत नहीं हूँ, भीतर का HTML (उस के लिए jquery क्या उपयोग करता है) मानक नहीं है, और मानक का पालन नहीं करने की कीमत मिसबिहेव हो सकती है। साथ ही, मेरे लिए, नोड तत्वों को जोड़ने के बजाय एक DOM ट्री में html string जोड़ने की कोई समझ नहीं है।

— स्टॉर्मबाइट

यह देखते हुए कि संपूर्ण DOM ट्री सादे पुराने HTML के रूप में जीवन शुरू करता है, और यह कि भीतर HTML बस है - HTML जिसमें एक तत्व है, या तो समस्या के साथ सममूल्य पर है यह कहते हुए कि आप DOM का उपयोग नहीं करना चाहिए क्योंकि यह प्रदूषित है सादे पुराने HTML।

— रॉडने पी। बारबाती