HTML DOM में एक नया एलिमेंट जोड़ने के लिए, हमें पहले इसे बनाना होगा और फिर इसे मौजूदा एलिमेंट में जोड़ना होगा।
पालन करने के चरण
1) पहले, एक div सेक्शन बनाएं और <p> टैग्स का उपयोग करके इसमें कुछ टेक्स्ट जोड़ें।
2) document.createElement("p") का उपयोग करके एक एलिमेंट <p> बनाएं।
3) document.createTextNode() का उपयोग करके एक टेक्स्ट बनाएं, ताकि इसे ऊपर बनाए गए एलिमेंट ("p") में डाला जा सके।
4) appendChild() का उपयोग करके बनाए गए एलिमेंट को, टेक्स्ट के साथ, मौजूदा div टैग में जोड़ने का प्रयास करें।
इस प्रकार एक नया एलिमेंट बनाया जाता है (<p>) और मौजूदा एलिमेंट (<div>) में जोड़ा जाता है।
उदाहरण
निम्न उदाहरण में, प्रारंभ में div सेक्शन में केवल 2 टेक्स्ट होते हैं। लेकिन बाद में, एक और टेक्स्ट बनाया जाता है और div सेक्शन में जोड़ा जाता है जैसा कि आउटपुट में दिखाया गया है।
<html> <body> <div id="new"> <p id="p1">Tutorix</p> <p id="p2">Tutorialspoint</p> </div> <script> var tag = document.createElement("p"); var text = document.createTextNode("Tutorix is the best e-learning platform"); tag.appendChild(text); var element = document.getElementById("new"); element.appendChild(tag); </script> </body> </html>
आउटपुट
Tutorix Tutorialspoint Tutorix is the best e-learning platform
