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