जावास्क्रिप्ट - DOM तत्वों के साथ कार्य करना। एक तत्व बनाना. जावास्क्रिप्ट - DOM: नोड्स जोड़ना और हटाना डोम जावास्क्रिप्ट में एक तत्व डालना

यदि आपको एक HTML तत्व बनाने की आवश्यकता है और आप नहीं जानते कि इसे कैसे कार्यान्वित किया जाए, तो आप सही जगह पर आए हैं। यह आलेख न केवल एक तत्व बनाने का एक उदाहरण देखेगा, बल्कि एक सार्वभौमिक फ़ंक्शन भी लिखेगा जिसके साथ आप एक नया तत्व बना सकते हैं, इसमें विभिन्न विशेषताएं जोड़ सकते हैं और इसे टेक्स्ट से भर सकते हैं।

लेकिन पहले, आइए कुछ सरल से शुरुआत करें। एक नया तत्व बनाने में, हम DOM ऑब्जेक्ट के तरीकों का उपयोग करेंगे, अर्थात्:

* document.createElement(param) - इस विधि का उपयोग सीधे तत्व बनाने के लिए किया जाता है। एक पैरामीटर के रूप में, यह बनाए जा रहे तत्व का नाम लेता है। बनाए गए तत्व का लिंक लौटाता है।

document.createElement('div'); // एक div तत्व बनाएगा।

* document.appendChild(param) - इस विधि का उपयोग HTML कोड में एक तत्व जोड़ने के लिए किया जाता है। पैरामीटर के रूप में निर्मित तत्व का लिंक लेता है;

var पैरेंट = document.getElementsByTagName("BODY"); //बॉडी तत्व का लिंक प्राप्त करें

var elem = document.createElement('div');// एक div तत्व बनाएगा

parent.appendChild(elem); // एक तत्व जोड़ता है, जहां पेरेंट वह लिंक है जहां हमारा तत्व जोड़ा जाएगा, इस मामले में यह बॉडी बॉडी है;

* document.createTextNode() - विधि का उपयोग किसी तत्व के अंदर टेक्स्ट रखने के लिए किया जाता है।

एक तत्व बनाने का एक उदाहरण.

फ़ंक्शन createElem() (

वर न्यूपी = document.createElement("p");

NewP.className = "elemClass";

NewP.id = "myPId";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "#c5c5c5";

NewP.style.color = "#000";

वार टेक्स्ट = "डालने के लिए टेक्स्ट";

वर textNode = document.createTextNode(text);

NewP.appendChild(textNode);

Parent.appendChild(newP);

CreateElem फ़ंक्शन में, पैरेंट वेरिएबल उस तत्व (बॉडी) का संदर्भ है जिसमें नया तत्व रखा जाएगा। फिर एक नया तत्व P बनाया जाता है, उसमें विशेषताएँ id, वर्ग, शैली जोड़ी जाती हैं और इन विशेषताओं के मान निर्धारित किए जाते हैं। फिर एक टेक्स्ट नोड बनाया जाता है और हमारे नए तत्व में जोड़ा जाता है। इन सबके बाद तत्व स्वयं ही शरीर के शरीर में जुड़ जाता है। बड़ी संख्या में नए तत्व बनाने के लिए आपको कड़ी मेहनत करनी होगी, क्योंकि... आपको उन्हें वेब पेज पर विभिन्न स्थानों पर रखने की आवश्यकता हो सकती है, उदा. विभिन्न तत्वों से जुड़ें।

सार्वभौमिक फ़ंक्शन का उपयोग करके एक तत्व बनाने का एक उदाहरण।

यह फ़ंक्शन आपको एक नया तत्व बनाने, उसमें विभिन्न विशेषताएँ जोड़ने, उसमें एक टेक्स्ट नोड संलग्न करने, उसे निर्दिष्ट तत्व से पहले या बाद में रखने, या तत्व को नए बनाए गए तत्व से बदलने में मदद करेगा। केवल नाम तर्क की आवश्यकता है.

फ़ंक्शन createElement(नाम, attrs, शैली, पाठ, Past_id, स्थिति, परिवर्तित) (

वर पैरेंट = document.getElementsByTagName("BODY");

वर ई = दस्तावेज़.createElement (नाम);

यदि (attrs) (

(attrs में कुंजी) के लिए (

यदि (कुंजी == "वर्ग") (

ई.वर्गनाम = attrs;

) अन्यथा यदि (कुंजी == "आईडी") (

E.id = attrs;

) अन्य (

E.setAttribute(कुंजी, attrs);

यदि (शैली) (

(शैली में कुंजी) के लिए (

ई.शैली = शैली;

यदि (पाठ) (

E.appendChild(document.createTextNode(text));

Parent.appendChild(e);

यदि(past_id)(

वर Old_elem = document.getElementById(past_id);

यदि(स्थिति=='पहले''(

Parent.insertBefore(e,old_elem)

)अन्यथा यदि(स्थिति=='बाद''(

InsertAfter(parent,e,old_elem);

यदि(परिवर्तित!='' && परिवर्तित==सत्य)(

Parent.removeChild(old_elem);

विकल्प:

नाम - तत्व का नाम;

Attrs - निर्मित तत्व की विशेषताएँ;

शैली - निर्मित तत्व की शैलियाँ;

पाठ - सम्मिलित पाठ;

Past_id - उस तत्व की आईडी जिसके आगे हमारा तत्व स्थित होगा;

स्थिति - पहले, बाद में दो मान ले सकते हैं;

परिवर्तित - एक ध्वज जो दो मान लेता है: सत्य या गलत। यदि यह पैरामीटर सत्य पर सेट है, तो पुराने तत्व को एक नए से बदल दिया जाएगा;

उदाहरण के तौर पर, आइए विशेषताओं के साथ एक DIV तत्व बनाएं और पुराने तत्व को नए बनाए गए तत्व से बदलें।

createElement("div",

("वर्ग": "myDivCSSClass", "आईडी": "myDivId", "संरेखित करें": "केंद्र"),

("चौड़ाई": "200px", "ऊंचाई": "250px", "पृष्ठभूमि": "#3B9D00", "रंग": "#fff"),

"यह मेरा पाठ है",

"परीक्षा",

"पहले"

अंतिम अद्यतन: 11/1/2015

तत्व बनाने के लिए, दस्तावेज़ ऑब्जेक्ट में निम्नलिखित विधियाँ हैं:

createElement(elementName): एक HTML तत्व बनाता है जिसका टैग एक पैरामीटर के रूप में पारित किया जाता है। निर्मित तत्व लौटाता है

createTextNode(text) : एक टेक्स्ट नोड बनाता है और लौटाता है। नोड टेक्स्ट को एक पैरामीटर के रूप में पारित किया जाता है।

तो elem वैरिएबल div तत्व का संदर्भ संग्रहीत करेगा। हालाँकि, केवल तत्व बनाना ही पर्याप्त नहीं है; उन्हें अभी भी वेब पेज पर जोड़ने की आवश्यकता है।

तत्वों को जोड़ने के लिए, हम नोड ऑब्जेक्ट के तरीकों में से एक का उपयोग कर सकते हैं:

appendChild(newNode): चाइल्ड नोड्स के संग्रह के अंत में एक नया नोड newNode जोड़ता है

InsertBefore(newNode, referenceNode) : referenceNode से पहले एक नया नोड newNode जोड़ता है

हम एपेंडचाइल्ड विधि का उपयोग करते हैं:

लेख का शीर्षक

पहला पैराग्राफ

दूसरा अनुच्छेद

सबसे पहले हम एक नियमित h2 हेडर तत्व और एक टेक्स्ट नोड बनाते हैं। फिर हम हेडर तत्व में एक टेक्स्ट नोड जोड़ते हैं। फिर हम वेब पेज के किसी एक तत्व में शीर्षक जोड़ते हैं:

हालाँकि, हमें किसी तत्व के अंदर टेक्स्ट को परिभाषित करने के लिए एक अतिरिक्त टेक्स्ट नोड बनाने की आवश्यकता नहीं है, क्योंकि हम textContent प्रॉपर्टी का उपयोग कर सकते हैं और इसे सीधे टेक्स्ट असाइन कर सकते हैं:

वर एलीम = document.createElement("h2"); elem.textContent = "हैलो वर्ल्ड";

इस मामले में, टेक्स्ट सेट होने पर टेक्स्ट नोड अंतर्निहित रूप से बनाया जाएगा।

अब आइए देखें कि डिव ब्लॉक के चाइल्ड नोड्स के संग्रह की शुरुआत में एक समान तत्व कैसे जोड़ा जाए:

वर आर्टिकलडिव = document.querySelector("div.article"); // एक तत्व बनाएं var elem = document.createElement("h2"); // इसके लिए टेक्स्ट बनाएं var elemText = document.createTextNode ("हैलो वर्ल्ड"); // तत्व में चाइल्ड के रूप में टेक्स्ट जोड़ें elem.appendChild(elemText); // पहला तत्व प्राप्त करें जो अतिरिक्त var फर्स्टएलेम = आर्टिकलडिव.फर्स्टचाइल्ड.नेक्स्टसिबलिंग से पहले होगा; // पहले नोड आर्टिकलDiv.insertBefore(elem,firstElem) से पहले div ब्लॉक में एक तत्व जोड़ें;

यदि हमें दूसरे, तीसरे या किसी अन्य स्थान पर एक नया नोड सम्मिलित करने की आवश्यकता है, तो हमें उस नोड को ढूंढना होगा जिसके पहले हमें फर्स्ट चाइल्ड/लास्ट चाइल्ड और नेक्स्ट सिबलिंग/प्रीवियस सिबलिंग गुणों के संयोजन का उपयोग करके सम्मिलित करना होगा।

कभी-कभी तत्व संरचना में काफी जटिल होते हैं, और अलग-अलग कॉल का उपयोग करके उनसे सामग्री बनाने की तुलना में उन्हें कॉपी करना बहुत आसान होता है। किसी नोड ऑब्जेक्ट से मौजूदा नोड्स की प्रतिलिपि बनाने के लिए, आप क्लोननोड() विधि का उपयोग कर सकते हैं:

वर आर्टिकलडिव = document.querySelector("div.article"); // आर्टिकलडिव तत्व को क्लोन करें var newArticleDiv = आर्टिकलडिव.क्लोनोड(सही); // बॉडी एलिमेंट के अंत में जोड़ें document.body.appendChild(newArticleDiv);

क्लोननोड () विधि को एक बूलियन मान को एक पैरामीटर के रूप में पारित किया जाता है: यदि सत्य पारित किया जाता है, तो तत्व को सभी चाइल्ड नोड्स के साथ कॉपी किया जाएगा; यदि गलत पारित हो जाता है, तो इसे चाइल्ड नोड्स के बिना कॉपी किया जाता है। यानी, इस मामले में हम नोड को उसकी सभी सामग्री के साथ कॉपी करते हैं और फिर इसे बॉडी तत्व के अंत में जोड़ते हैं।

किसी तत्व को हटाने के लिए, नोड ऑब्जेक्ट की रिमूवचाइल्ड() विधि को कॉल करें। यह विधि चाइल्ड नोड्स में से एक को हटा देती है:

वर आर्टिकलडिव = document.querySelector("div.article"); // वह नोड ढूंढें जिसे हम हटा देंगे - पहला पैराग्राफ var removableNode = document.querySelectorAll('div.article p'); // नोड को हटाएं articalDiv.removeChild(removableNode);

इस स्थिति में, पहला पैराग्राफ div ब्लॉक से हटा दिया जाता है

किसी तत्व को बदलने के लिए, नोड ऑब्जेक्ट की रिप्लेसचाइल्ड(न्यूनोड, ओल्डनोड) विधि का उपयोग करें। यह विधि पहले पैरामीटर के रूप में एक नया तत्व लेती है, जो दूसरे पैरामीटर के रूप में पारित पुराने तत्व OldNode को प्रतिस्थापित करती है।

वर आर्टिकलडिव = document.querySelector("div.article"); // वह नोड ढूंढें जिसे हम प्रतिस्थापित करेंगे - पहला पैराग्राफ var OldNode = document.querySelectorAll('div.article p'); // एक तत्व बनाएं var newNode = document.createElement("h2"); // इसके लिए टेक्स्ट बनाएं var elemText = document.createTextNode ("हैलो वर्ल्ड"); // तत्व में चाइल्ड तत्व के रूप में टेक्स्ट जोड़ें newNode.appendChild(elemText); // पुराने नोड को एक नए लेख से बदलेंDiv.replaceChild(newNode, OldNode);

इस मामले में, हम पहले पैराग्राफ को h2 शीर्षक से बदल देते हैं।

इस पोस्ट में मैं आपको बताना चाहता हूं कि जावास्क्रिप्ट में किसी ऑब्जेक्ट से किसी तत्व को कैसे जोड़ा या हटाया जाए। यह बहुत आसान है, लेकिन मेरे जैसे कई शुरुआती, अक्सर इसके बारे में भ्रमित हो जाते हैं।

हमारे पास एक साधारण ऑब्जेक्ट है जिसमें नाम, अंतिम नाम और वेबसाइट जैसे डेटा शामिल हैं। डेटा बिल्कुल कुछ भी हो सकता है, लेकिन इस पोस्ट के प्रयोजनों के लिए यह बिल्कुल वैसा ही होगा।

उपरोक्त कोड स्पष्ट है, लेकिन केवल स्पष्ट करने के लिए: आप "" का उपयोग करके ऑब्जेक्ट सिंटैक्स में किसी ऑब्जेक्ट में नए मान जोड़ सकते हैं। और कुंजी या सामान्य सरणी प्रारूप। यदि आप इसे एक सरणी के रूप में घोषित करते हैं, तो ओबीजे अभी भी एक ऑब्जेक्ट है, क्योंकि आपने पहले इसे इस तरह से निर्दिष्ट किया था () के लिए धन्यवाद।

आइए अब वहां कुछ डेटा जोड़ें:

obj.other_obj.first = "नए ऑब्जेक्ट की पहली कुंजी"; obj.other_obj.Second = "दूसरा";

हमने अन्य_ओबीजे के अंदर दो नए मान बनाए हैं, पहला और दूसरा।

आप डिलीट का उपयोग कर सकते हैं, जो ऑब्जेक्ट से तत्वों को हटा सकता है। आप इस तरह से संपूर्ण ऑब्जेक्ट को नहीं हटा सकते, लेकिन यदि आपको आवश्यकता हो, तो आप यह कर सकते हैं:

ओब्जे = (); // ऑब्जेक्ट को फिर से खाली कर देता है

बस इतना ही, यदि आपके पास अभी भी जावास्क्रिप्ट में वस्तुओं के बारे में कोई प्रश्न है, तो नीचे एक टिप्पणी लिखें, मैं आपकी मदद करने की कोशिश करूंगा।

चरण 1. तत्व तैयार करें:

चरण 2. बाद में जोड़ें:

जावास्क्रिप्ट में InsertBefore() है लेकिन मैं एक तत्व कैसे सम्मिलित कर सकता हूं बाद jQuery या किसी अन्य लाइब्रेरी का उपयोग किए बिना कोई अन्य तत्व?

जोड़ना:

Element.parentNode.insertBefore(newElement, element);

बाद में जोड़ें:

Element.parentNode.insertBefore(newElement, element.nextSiling);

निम्नलिखित प्रोटोटाइप बनाकर, आप इस फ़ंक्शन को सीधे नए बनाए गए तत्वों से कॉल करने में सक्षम होंगे।

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) प्रोटोटाइप

Element.prototype.appendBefore = फ़ंक्शन (तत्व) ( element.parentNode.insertBefore(यह, तत्व); ),झूठा;

.appendAfter(element)प्रोटोटाइप

Element.prototype.appendAfter = फ़ंक्शन (तत्व) ( element.parentNode.insertBefore(this, element.nextSibling); ),झूठा;

/* NeighborElement से पहले तत्व जोड़ता है */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* NeighborElement के बाद तत्व जोड़ता है */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), गलत; /* विशिष्ट निर्माण और सेटअप एक नया अनाथ तत्व ऑब्जेक्ट */ var NewElement = document.createElement("div"); NewElement.innerHTML = "नया तत्व"; NewElement.id = "NewElement"; /* उपरोक्त प्रोटोटाइप का उपयोग करने से पहले या बाद में नया तत्व जोड़ें */ NewElement.appendAfter(document.getElementById("Neighbor2")); div (पाठ-संरेखण: केंद्र;) #पड़ोस (रंग: भूरा;) #नया तत्व (रंग: हरा;) पड़ोसी 1 पड़ोसी 2 पड़ोसी 3

आदर्श रूप से इन्सर्टआफ्टर को एमडीएन के समान काम करना चाहिए। नीचे दिया गया कोड निम्नलिखित कार्य करेगा:

• यदि कोई संतान नहीं है, तो एक नया नोड जोड़ा जाता है
• यदि कोई संदर्भ नोड नहीं है, तो एक नया नोड जोड़ा जाता है
• यदि संदर्भ नोड के बाद कोई नोड है, तो एक नया नोड जोड़ा जाता है
• यदि संदर्भित नोड में बच्चे हैं, तो नया नोड उस भाई-बहन से पहले डाला जाता है
• एक नया नोड लौटाता है

नोड विस्तार

Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; );

एक सामान्य उदाहरण

Node.parentNode.insertAfter(newNode, node);

कोड चल रहा है देखें

// पहले विस्तार करें Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "पहला नया आइटम"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "दूसरा नया आइटम"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("कोई भाई-बहन नहीं"); newNode = document.createElement("li"); newNode.innerText = "तीसरा नया आइटम"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("सिबलिंग-आफ्टर"); newNode = document.createElement("li"); newNode.innerText = "चौथा नया आइटम"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); कोई संतान नहीं कोई संदर्भ नोड नहीं

• पहला आइटम

• पहला आइटम

• पहला आइटम
• तीसरा आइटम

InsertBefore() विधि का उपयोगparentNode.insertBefore() की तरह किया जाता है। तो इसका अनुकरण करने और एकparentNode.insertAfter() विधि बनाने के लिए हम निम्नलिखित कोड लिख सकते हैं।

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // karim79"s समाधान पर आधारित); // आवश्यक हैंडल प्राप्त करना var refElem = document.getElementById(" pTwo"); varparent = refElem.parentNode; // बनाना

अनुच्छेद तीन

अनुच्छेद एक

अनुच्छेद दो

कृपया ध्यान दें कि DOM एक्सटेंशन हो सकता है गलत फैन्स्लाआपके लिए, जैसा कि इस लेख में बताया गया है।

हालाँकि, यह लेख 2010 में लिखा गया था और अब चीजें अलग हो सकती हैं। तो आप स्वयं निर्णय करें।

आपको सभी परिदृश्यों को संभालने की अनुमति देता है

फ़ंक्शन इंसर्टआफ्टर(न्यूनोड, रेफरेंसनोड) ( यदि(रेफरेंसनोड && रेफरेंसनोड.नेक्स्टसिब्लिंग && रेफरेंसनोड.नेक्स्टसिबलिंग.नोडनाम == "#टेक्स्ट") रेफरेंसनोड = रेफरेंसनोड.नेक्स्टसिबलिंग; अगर(!रेफरेंसनोड) डॉक्यूमेंट.बॉडी.एपेंडचाइल्ड(न्यूनोड); अन्यथा यदि (!referenceNode.nextSiling) document.body.appendChild(newNode); अन्यथा referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

यह कोड एक छोटी सी सीएसएस फ़ाइल को इनलाइन करने के लिए अंतिम मौजूदा चाइल्ड इनलाइनिंग के ठीक बाद एक लिंक तत्व डालने का काम करता है

वर राफ, सीबी=फंक्शन())( //न्यूनोड बनाएं वर लिंक=डॉक्यूमेंट.क्रिएटएलिमेंट('लिंक'); लिंक.रेल='स्टाइलशीट';लिंक.टाइप='टेक्स्ट/सीएसएस';लिंक.href='सीएसएस / style.css"; //लास्टनोड के बाद डालें var nodes=document.getElementsByTagName("link"); //मौजूदा नोड्स var Lastnode=document.getElementsByTagName("link"); Lastnode.parentNode.insertBefore(link, Lastnode. अगला भाई ); //डालने से पहले जांचें प्रयास करें (raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) पकड़ें(त्रुटि)(raf=false; ) यदि (raf)raf(cb); अन्यथा window.addEventListener('load',cb);

मैं जानता हूं कि इस प्रश्न के पहले से ही बहुत सारे उत्तर हैं, लेकिन उनमें से कोई भी मेरी सटीक आवश्यकताओं को पूरा नहीं करता है।

मुझे एक ऐसे फ़ंक्शन की आवश्यकता है जिसमेंparentNode.insertBefore का बिल्कुल विपरीत व्यवहार हो - यानी, इसे एक शून्य संदर्भ नोड स्वीकार करना चाहिए (जो प्रतिक्रिया में स्वीकार नहीं किया जाता है) और जहां InsertBefore डाला जाएगा अंतसम्मिलित करें, इससे पहले कि उसे सम्मिलित करना चाहिए शुरुआत, क्योंकि अन्यथा इस फ़ंक्शन के साथ मूल स्थान पर चिपकाने का कोई तरीका नहीं होगा; इसी कारण से अंत में डालने से पहले डालें।

चूंकि एक शून्य संदर्भ नोड के लिए आपको पैरेंट से पहले InsertBefore की आवश्यकता होती है, इसलिए हमें पैरेंट को जानने की आवश्यकता है - InsertBefore ParentNode की एक विधि है, इसलिए इसकी इस तरह से पैरेंट के पैरेंटनोड तक पहुंच होती है; हमारा फ़ंक्शन मौजूद नहीं है, इसलिए हमें पास होने की आवश्यकता है मूल तत्वएक पैरामीटर के रूप में.

परिणामी फ़ंक्शन इस तरह दिखता है:

फ़ंक्शन इंसर्टआफ्टर(पेरेंटनोड, न्यूनोड, रेफरेंसनोड) (parentNode.insertBefore(newNode, referenceNode ? referenceNode.nextSibling:parentNode.firstChild); )

यदि (! Node.prototype.insertAfter) ( Node.prototype.insertAfter = function(newNode, referenceNode) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); ); )

node1.after(node2) बनाता है,

जहां नोड1 और नोड2 DOM नोड हैं।

इस पाठ में हम सीखेंगे कि एलिमेंट नोड्स (createElement) और टेक्स्ट नोड्स (createTextNode) कैसे बनाएं। हम ट्री में नोड्स जोड़ने (एपेंड चाइल्ड, इंसर्टबिफोर) और ट्री से नोड्स हटाने (रिमूव चाइल्ड) के लिए डिज़ाइन की गई विधियों पर भी विचार करेंगे।

किसी पेड़ में नया नोड जोड़ना आम तौर पर 2 चरणों में किया जाता है:

• createElement() - एक तत्व (नोड) बनाता है निर्दिष्ट नाम(टैग)। createElement(element) विधि में एक आवश्यक पैरामीटर (तत्व) है - यह एक स्ट्रिंग है जिसमें बनाए जाने वाले तत्व (टैग) का नाम होता है। पैरामीटर में तत्व (टैग) का नाम बड़े अक्षरों में होना चाहिए। नतीजतन यह विधिवह तत्व लौटाता है जो बनाया गया था।
• createTextNode() - निर्दिष्ट टेक्स्ट के साथ एक टेक्स्ट नोड बनाता है। CreateTextNode(text) विधि में एक आवश्यक पैरामीटर (टेक्स्ट) है - यह एक स्ट्रिंग है जिसमें टेक्स्ट नोड का टेक्स्ट होता है। परिणामस्वरूप, यह विधि बनाए गए टेक्स्ट नोड को वापस कर देती है।

AppendChild() और InsertBefore() विधियों का उपयोग करके मौजूदा नोड्स के साथ काम करना भी 2 चरणों में किया जाता है:

उदाहरण के लिए, सूची की शुरुआत में "टैबलेट" टेक्स्ट वाला मौजूदा ली तत्व जोड़ें (यह इसे पिछले स्थान से हटा देगा):

// सूची वाले UL तत्व को उसकी आईडी var elementUL = document.getElementById("list"); द्वारा प्राप्त करें; // टेक्स्ट नोड "टैबलेट" वाला ली तत्व प्राप्त करें var elementLI = elementUL.childNodes; // सूची की शुरुआत में एक तत्व जोड़ें // इस मामले में इसे इसके मूल स्थान से हटा दिया जाएगा elementUL.insertBefore(elementLI,elementUL.firstChild);

• दस्तावेज़ में दो सूचियाँ हैं. आपको तत्वों को दूसरी सूची से पहली सूची में ले जाना होगा।
• एक सूची, एक टेक्स्ट फ़ील्ड और 2 बटन बनाएं। जावास्क्रिप्ट में कोड लिखें, जो दबाए गए बटन के आधार पर, टेक्स्ट फ़ील्ड में टेक्स्ट को सूची की शुरुआत या अंत में जोड़ता है।

किसी पेड़ से नोड हटाना 2 चरणों में किया जाता है:

// वह नोड ढूंढें जिसे हम हटाना चाहते हैं var findElement = document.getElementById("notebook"); //पैरेंट नोड पर रिमूवचाइल्ड विधि को कॉल करें //और इसे पाए गए नोड को एक पैरामीटर के रूप में पास करें findElement.parentNode.removeChild(findElement);

उदाहरण के लिए, किसी तत्व के अंतिम चाइल्ड तत्व को हटा दें जिसमें id='myID' है:

//वह तत्व प्राप्त करें जिसमें id='myID' var myID = document.getElementById('myID'); //तत्व का अंतिम चाइल्ड नोड प्राप्त करें myID var LastNode = myID.lastChild; //क्योंकि हमें नहीं पता कि तत्व का अंतिम चाइल्ड नोड एक तत्व है, //तो हम इसका उपयोग करेंगे घुमाव के दौरानकिसी तत्व के अंतिम चाइल्ड तत्व को खोजने के लिए myID //जबकि तत्व में एक नोड है और उसका प्रकार 1 नहीं है (यानी यह एक तत्व नहीं है) while(lastNode && LastNode.nodeType!=1) ( //पर जाएं) पिछला नोड लास्टनोड = लास्टनोड.प्रीवियससिबलिंग; ) //यदि हमें myID नोड पर कोई तत्व मिला है यदि (लास्टनोड) ( //तो इसे लास्टनोड.पैरेंटनोड.रिमूवचाइल्ड(लास्टनोड); हटा दिया जाना चाहिए।)

उदाहरण के लिए, किसी तत्व के सभी चाइल्ड नोड्स को हटा दें जिसमें id='myQuestion' है:

// वह तत्व प्राप्त करें जिससे हम उसके सभी चाइल्ड नोड्स को हटाना चाहते हैं var elementQuestion = document.getElementById("myQuestion"); //जबकि पहला तत्व है while (elementQuestion.firstElement) ( //इसे हटाएं elementQuestion.removeChild(element.firstChild); )