लोड हो रहा है...

एलिमेंट बनाना

रसोई के कॉर्क बोर्ड पर पहले से एक पर्ची टँगी है: milk. सूची #board है. वह पर्ची एक li है, id milk. मार्कअप एक ही लाइन में है, इसलिए लाइन-ब्रेक वाला खाली टेक्स्ट नोड नहीं है.
तुम tea, bread और eggs जोड़ना चाहते हो. टैग को स्ट्रिंग से मत बनाओ. document.createElement("li") एक नया li देता है जो अभी दस्तावेज़ में नहीं है. parentElement null है. document.body.contains false है. board.children.length 1 ही रहता है, क्योंकि बोर्ड पर सिर्फ milk है.
textContent = "tea" उस ऑब्जेक्ट पर शब्द लिखता है. पेज से अभी नहीं जोड़ता.
board.append(tea) उसे सूची के आखिर में लगाता है. कॉल का नतीजा undefined है. नोड वापस नहीं मिलता. appendChild वही नोड देता है; यह पेज append इस्तेमाल करता है. prepend ब्रेड को आगे रखता है. insertBefore(eggs, milk) अंडे को milk के ठीक पहले रखता है, और milk पहले से बोर्ड का बच्चा है. क्रम बनता है bread, eggs, milk, tea. children.length 4 हो जाता है.
एक किनारे का परीक्षण सिर्फ ताज़ा बोर्ड पर: createTextNode("salt"). यह टेक्स्ट नोड है, li नहीं. लगाने पर children.length 1 रहता है. childNodes.length 1 से 2 हो जाता है. nodeType 3 है. आखिरी एलिमेंट अब भी milk है. पेज डेमो नमक नहीं लगाता.
बोर्ड के नीचे की लाइन है bread / eggs / milk / 4. tea सूची में है, इस लाइन में नहीं. 4 एलिमेंट की गिनती है. milk का टेक्स्ट milk ही रहता है. यहाँ कोई CSS प्रॉपर्टी नहीं लिखते.

नए नोड, रंग की नई परत नहीं

पिछला पेज पेंट चिप पर style, setProperty, classList और cssText लिखता था. वह नोड नहीं बनाता था. उससे पहले वाला पेज textContent, innerHTML और insertAdjacentHTML से शब्द बदलता था. यहाँ तुम style नहीं लिखते, HTML स्ट्रिंग नहीं पार्स करते, और milk शब्द नहीं बदलते. getElementById सिर्फ बोर्ड और milk पर्ची देता है. नई पंक्तियाँ createElement से आती हैं.

हर नया नोड कहाँ बैठता है

बोर्ड एक li से शुरू होता है: milk. पंक्तियाँ क्रम से पढ़ो. नमक वाली पंक्ति ताज़ा बोर्ड पर किनारे का परीक्षण है, tea, bread और eggs से पहले. पेज डेमो insertBefore पर रुकता है और नमक नहीं लगाता.

📊 हर नया नोड कहाँ बैठता है

कॉल नया नोड कहाँ है एलिमेंट बच्चे आसान उलझन
createElement("li") कहीं नहीं; parentElement null है अब भी 1, milk पर्ची पहले से बोर्ड पर है, ऐसा मानना
textContent = "tea" अब भी कहीं नहीं अब भी 1 शब्द खुद li डाल दे, ऐसा मानना
append(tea) आखिर में; नतीजा undefined 2: milk, फिर tea append नोड लौटाए, ऐसी उम्मीद
prepend(bread) शुरू में 3: bread, milk, tea prepend और append को उलट देना
insertBefore(eggs, milk) milk के ठीक पहले 4: bread, eggs, milk, tea ऐसा रेफरेंस जो बोर्ड का बच्चा नहीं
append(createTextNode("salt")) ताज़ा बोर्ड पर milk के बाद टेक्स्ट नोड, li नहीं अब भी 1 children.length का 2 हो जाना

createElement नोड को मेमोरी में बनाता है. जब तक कोई मेथड उसे रखे नहीं, बोर्ड नहीं बदलता. children सिर्फ एलिमेंट बच्चों को गिनता है. टेक्स्ट नोड childNodes में होता है, children में नहीं. append और prepend undefined देते हैं. appendChild वही नोड देता है जो तुम देते हो. append नोड या स्ट्रिंग लेता है; स्ट्रिंग टेक्स्ट नोड बन जाती है. appendChild नोड लेता है, स्ट्रिंग पर त्रुटि फेंकता है. insertBefore को ऐसा रेफरेंस चाहिए जो पहले से उस पैरेंट का बच्चा हो. null दो तो नोड आखिर में जाता है, append जैसा. यह पेज milk देता है, null नहीं. जो नोड पहले से बोर्ड पर है उसे फिर append करो तो वह हिलता है. कॉपी नहीं होता.

नया li अभी बोर्ड पर नहीं है

फ़ाइल एक-लाइन सूची से खुलती है. अभी कुछ बना नहीं. पहली चार रीडिंग नए नोड और बोर्ड से पूछती हैं, टेक्स्ट से पहले और लगाने से पहले.

अलग पर्ची

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);

आउटपुट: null, false, 1, और खाली स्ट्रिंग. ब्राउज़र के पास असली li ऑब्जेक्ट है. उसका पैरेंट नहीं है. इकलौता एलिमेंट बच्चा अब भी milk है. शब्द milk उस पुरानी पर्ची का है, नई वाली का नहीं.

शब्द tea उसे अभी सूची में नहीं डालता

textContent उसी नोड का टेक्स्ट बदलता है जो तुम्हारे हाथ में है. यह लगाने का तरीका नहीं है. बोर्ड के बच्चों की सूची नहीं बढ़ती.

टेक्स्ट, अभी अलग

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);

आउटपुट: tea, false, और 1. शब्द ऑब्जेक्ट पर पढ़ सकते हो. पेज अब भी सिर्फ milk दिखाता है. contains false है क्योंकि नोड दस्तावेज़ के नीचे नहीं बैठा.

append चाय को आखिर में रखता है

append नोड को आखिरी बच्चा बनाता है. fromAppend कॉल का नतीजा रखता है, जो undefined है, li नहीं. कॉल के बाद पैरेंट बोर्ड है और आखिरी एलिमेंट का टेक्स्ट tea है. क्रम: milk, फिर tea.

चाय लगाना

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);

आउटपुट: undefined, true, tea, और 2. appendChild(tea) वही नोड दिखाता. यह टुकड़ा appendChild नहीं बुलाता. milk अब भी पहला एलिमेंट बच्चा है.

prepend और insertBefore क्रम जमाते हैं

यह टुकड़ा फिर मूल बोर्ड से शुरू होता है और तीन जगह लगाता है. prepend तब चलता है जब tea पहले से आखिर में है, इसलिए bread पहला बच्चा बनता है. insertBefore(eggs, milk) का रेफरेंस milk है, इसलिए eggs, bread और milk के बीच बैठता है. चार टेक्स्ट: bread, eggs, milk, tea.

ब्रेड और अंडे रखना

javascript 
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);

आउटपुट: bread, eggs, milk, और tea. children.length 4 है. इंडेक्स 1 eggs है, milk नहीं. milk इंडेक्स 0 से 2 पर चला गया क्योंकि दो पर्चियाँ उसके आगे आ गईं. milk का टेक्स्ट अब भी शब्द milk है.

टेक्स्ट नोड children में नहीं आता

यह ब्लॉक ताज़ा बोर्ड पर चलाओ, वही एक-लाइन सूची, पेज स्क्रिप्ट के बाद नहीं. createTextNode टेक्स्ट नोड बनाता है. nodeType 3 का मतलब टेक्स्ट. nodeType 1 का मतलब एलिमेंट. children उसे छोड़ देता है, लंबाई 1 रहती है. childNodes उसे गिनता है, लंबाई 1 से 2 हो जाती है. आखिरी एलिमेंट अब भी milk पर्ची है. सूची में salt शब्द दिख सकता है, फिर भी वह li नहीं है.

नमक का टेक्स्ट नोड

javascript 
let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);

आउटपुट: 3, 1, 2, और milk. append को स्ट्रिंग दो, जैसे board.append("salt"), तो भी टेक्स्ट नोड बनता है, li नहीं. नीचे का पेज डेमो इस लाइन को नहीं चलाता.

बोर्ड के नीचे एक लाइन

स्क्रिप्ट body के आखिर में है, सूची के बाद. tea को आखिर में लगाती है, bread को आगे रखती है, और eggs को milk से पहले डालती है. salt नहीं बनाती. इंडेक्स 0, 1, 2 और एलिमेंट की गिनती लिखती है. चौथा टेक्स्ट, tea, लाइन में नहीं आता.

पेज डेमो — बोर्ड

html 
<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>

लाइन बनती है bread / eggs / milk / 4. सूची खुद bread, eggs, milk, tea है. लाइन तीसरे आइटम पर रुकती है और फिर लंबाई लिखती है, इसलिए tea आखिरी टोकन नहीं और आखिरी टोकन शब्द भी नहीं. salt नहीं है. milk पर्ची का टेक्स्ट अब भी milk है. अगला पेज इवेंट का है. इन नोड को बनाने का दूसरा तरीका वहाँ नहीं आता.

बोर्ड खुद जाँचो

  1. li बनाओ और parentElement, document.body.contains, children.length, textContent पढ़ो. मान: null, false, 1, और खाली स्ट्रिंग.
  2. टेक्स्ट tea रखो और टेक्स्ट, contains, लंबाई पढ़ो. मान: tea, false, और 1.
  3. tea को append करो. कॉल का नतीजा, पैरेंट बोर्ड है या नहीं, आखिरी एलिमेंट का टेक्स्ट, और लंबाई पढ़ो. मान: undefined, true, tea, और 2. फिर क्रम वाला टुकड़ा चलाओ और bread, eggs, milk, tea पढ़ो.
  4. ताज़ा बोर्ड पर नमक का टेक्स्ट नोड append करो. nodeType, children.length, childNodes.length, और आखिरी एलिमेंट की id पढ़ो. मान: 3, 1, 2, और milk. पेज लाइन: bread / eggs / milk / 4.

इसी बोर्ड की चूक

सूची अब भी milk से खुलती है. कॉल गलत तरह का इन्सर्ट था.

  • यह उम्मीद कि createElement("li") तुरंत tea बोर्ड पर दिखा दे
  • यह उम्मीद कि textContent = "tea" children.length बढ़ा दे
  • यह उम्मीद कि append li लौटाए; वह काम appendChild करता है
  • appendChild को स्ट्रिंग देना; स्ट्रिंग append की है और वहाँ टेक्स्ट नोड बनती है
  • insertBefore को ऐसा रेफरेंस देना जो बोर्ड का बच्चा नहीं
  • नमक के टेक्स्ट नोड को children में गिनना
  • नई पंक्ति innerHTML से बनाना; HTML बदलने वाला पेज मार्कअप पार्स करता था
  • यहाँ style.color लिखना; पिछला पेज CSS लिखता था
  • लाइन को bread / eggs / milk / tea पढ़ना
  • यहाँ remove या cloneNode बुलाना; यह पेज सिर्फ तीन पर्चियाँ जोड़ता है

ये साथ ले जाओ

  • createElement("li") अलग पर्ची बनाता है; parentElement null है और children.length 1 रहता है
  • textContent = "tea" शब्द लिखता है और नोड को बोर्ड से बाहर छोड़ता है
  • append(tea) चाय को आखिर में रखता है और कॉल का नतीजा undefined है
  • prepend(bread) और insertBefore(eggs, milk) क्रम bread, eggs, milk, tea बनाते हैं
  • ताज़ा बोर्ड पर createTextNode("salt") children.length को 1 रखता है और nodeType 3 बताता है
  • लाइन bread / eggs / milk / 4 होती है, और milk का टेक्स्ट milk रहता है

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
8
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 48 का 48
Javascript ट्यूटोरियल