मान लीजिए कि मैं अपनी एचटीएमएल फाइलों में से एक में एक मौजूदा div (कक्षा नाम "कंटेनर" के साथ) में एक नया बनाया पैराग्राफ जोड़ना चाहता हूं। क्या कुछ तरीकों को कॉल करके ऐसा करने का कोई तरीका है?

चूंकि एक getElementById() विधि है, मुझे लगा कि मैं एक getElementByClassName() विधि का भी उपयोग करूंगा, लेकिन वह मौजूद नहीं है; इसके बजाय getElementsByClassName() मौजूद है। एक तरह से मैं इसे प्राप्त कर सकता हूं, बस अपने div को कक्षा के नाम के बजाय आईडी रखने के लिए बदलना है, और div में अनुच्छेद जोड़ने के लिए getElementById() का उपयोग करना है, लेकिन मैं जानना चाहता था कि क्या कुछ ऐसा तरीका था जिसे मैं कॉल कर सकता था जो मुझे एक वर्ग तत्व (बजाय कक्षा के भीतर के तत्वों के बजाय) को पुनः प्राप्त करने में मदद करेगा।

मैंने इसे ऑनलाइन खोजने की कोशिश की है, लेकिन मुझे जो मिला है वह इसके बजाय "तत्वों में कक्षा के नाम कैसे जोड़ें" के उत्तर हैं, जो कि मैं नहीं जानना चाहता हूं।

-1
Johan von Adden 30 जुलाई 2020, 02:21

2 जवाब

सबसे बढ़िया उत्तर

एक तत्व के लिए, यह पहले DOM क्रम में चुना जाएगा:

var p = document.createElement("p");   
p.innerHTML = "p element";                   
document.querySelector(".container").appendChild(p);
<div class="container">container</div>

चुने हुए वर्ग वाले सभी तत्वों के लिए:

[...document.querySelectorAll('.container')].forEach(el => {
var p = document.createElement("p");   
p.innerHTML = "p element"; 
el.appendChild(p);
})
<div class="container">container</div>
<div class="container">container2</div>
1
ikiK 30 जुलाई 2020, 02:35

HTML DOM तत्वों की आईडी एक दस्तावेज़ के भीतर अद्वितीय होनी चाहिए - और इसलिए Id द्वारा एक तत्व के लिए पूछना आपको केवल एक तत्व (या यदि कोई मेल खाने वाला तत्व नहीं है तो शून्य) लौटाएगा।

हालांकि एक वर्ग का नाम कई तत्वों पर लागू किया जा सकता है, इसलिए आप कक्षा द्वारा खोज करते समय शून्य एक या अधिक तत्व प्राप्त करने की अपेक्षा करेंगे, इसलिए getElementsByClassName एक संग्रह लौटाता है।

इसलिए यदि आपके पास वर्ग नाम कंटेनर वाले तत्वों की एक सूची है, और आप जानते हैं कि आपका दस्तावेज़ (उम्मीद है) केवल उस नाम के साथ एक तत्व है, तो आप getElementsByClassName द्वारा लौटाए गए पहले तत्व को चुन सकते हैं - उदा। getElementsByClassName('container')[0]

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

1
Andy Clapham 30 जुलाई 2020, 02:38