HTML DOM appendChild() मेथड का उपयोग चाइल्ड नोड्स की सूची के अंत में एक टेक्स्ट नोड बनाने और जोड़ने के लिए किया जाता है। appendChild() मेथड का उपयोग किसी एलिमेंट को वर्तमान स्थिति से नई स्थिति में ले जाने के लिए भी किया जा सकता है। appendChild() का उपयोग करके आप एक सूची में नए मान जोड़ सकते हैं और यहां तक कि एक पैराग्राफ के नीचे एक नया पैराग्राफ भी जोड़ सकते हैं।
सिंटैक्स
appendChild() मेथड के लिए निम्नलिखित सिंटैक्स है -
node.appendChild( node )
यहां, पैरामीटर node वह ऑब्जेक्ट है जिसे आप जोड़ना चाहते हैं। यह एक अनिवार्य पैरामीटर मान है।
उदाहरण
आइए appendChild() मेथड का एक उदाहरण देखें -
<!DOCTYPE html> <html> <body> <p>Click the button to create a paragraph and append it to the div</p> <div id="SampleDIV"> A DIV element </div> <button onclick="AppendP()">Append</button> <script> var x=1; function AppendP() { var paragraph = document.createElement("P"); paragraph.innerHTML = "This is paragraph "+x; document.getElementById("SampleDIV").appendChild(paragraph); x++; } </script> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
3 बार append पर क्लिक करने के बाद: -
उपरोक्त उदाहरण में -
हमने “SampleDIV” id के साथ एक div बनाया है। जोड़ा गया नोड इस div के चाइल्ड के रूप में कार्य करेगा।
<div id="SampleDIV"> A DIV element </div>
हमारे पास तब “Append” नाम का एक बटन है जो AppendP() फ़ंक्शन को निष्पादित करेगा
<button onclick="AppendP()">Append</button>
AppendP() फ़ंक्शन पहले एक पैराग्राफ (p) एलिमेंट बनाता है और इसे वेरिएबल paragraph को असाइन करता है। फिर innerHTML का उपयोग करके पैराग्राफ में कुछ टेक्स्ट जोड़ा जाता है और एक वेरिएबल x को टेक्स्ट में जोड़ा जाता है। यह वेरिएबल हर बार ”Append” बटन पर क्लिक करने पर बढ़ाया जाता है। अंत में हम नव निर्मित पैराग्राफ को div एलिमेंट के चाइल्ड नोड के रूप में जोड़ते हैं -
var x=1; function AppendP() { var paragraph = document.createElement("P"); paragraph.innerHTML = "This is paragraph "+x; document.getElementById("SampleDIV").appendChild(paragraph); x++; }
