PricingLoginStart free
Frontend Academy · पाठ

तत्व बनाना और जोड़ना

DOM संरचना को गतिशील रूप से बनाने और बदलने के लिए createElement, setAttribute, append और remove का उपयोग करें।

पाठ 4, कुल 4 में से13 चरण

तत्व बनाना और जोड़ना, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

createElement

document.createElement(tagName) मेमोरी में एक नया element बनाता है — वह अभी DOM में नहीं होता। इसके बाद आप उसकी properties निर्धारित करके उसे ट्री में append करते हैं।

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append और appendChild

parent.append(child) parent के children के अंत में कोई node या string जोड़ता है। appendChild इसका पुराना समकक्ष है, लेकिन append अधिक लचीला है — यह कई nodes और strings स्वीकार करता है।

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() शुरुआत में जोड़ता है। element.before() तत्व से पहले इंसर्ट करता है। element.after() उसके बाद इंसर्ट करता है।

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) मौजूदा सामग्री को बदले बिना, निर्दिष्ट स्थान पर HTML इंसर्ट करता है। स्थान: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'।

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) किसी तत्व और उसके सभी child elements सहित उसकी डीप कॉपी बनाता है। शैलो कॉपी के लिए false पास करें। template elements को डुप्लिकेट करने के लिए उपयोगी है।

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild और remove()

element.remove() तत्व को DOM से हटा देता है। पुरानी parent.removeChild(child) विधि भी काम करती है। हटाए गए तत्वों का संदर्भ variables में अभी भी रखा जा सकता है और उन्हें फिर से जोड़ा जा सकता है।

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) DOM में पुराने तत्व को नए तत्व से बदल देता है। पुराने replaceChild पैटर्न की तुलना में यह अधिक सुविधाजनक है।

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment से एक साथ इंसर्ट करना

DocumentFragment एक हल्का container है जो DOM में मौजूद नहीं होता। इसके अंदर एक subtree बनाएँ, फिर उसे एक ही ऑपरेशन में append करें — इससे N बार reflow होने के बजाय केवल एक बार reflow होता है।

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

&lt;template&gt; तत्व

HTML का <template> तत्व ऐसा markup रखता है जिसे JavaScript से clone किए जाने तक रेंडर नहीं किया जाता। यह strings बनाने या दिखाई देने वाले elements को clone करने से बेहतर है।

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Properties और Attributes सेट करना

Element properties (el.href, el.src, el.value) अक्सर values सेट करने का सबसे सीधा और बेहतर प्रदर्शन वाला तरीका होती हैं। Attributes (setAttribute) उन custom या ARIA attributes के लिए सबसे अच्छे हैं जिनकी corresponding DOM property नहीं होती।

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

User Content के साथ innerHTML से बचना

User द्वारा दिए गए data से elements बनाते समय, HTML string बनाने और innerHTML का उपयोग करने के बजाय हमेशा DOM methods (createElement, textContent, setAttribute) का उपयोग करें। User input को कभी भी HTML strings में interpolate न करें।

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

त्वरित जाँच

आपको 100 reflows कराए बिना किसी <ul> में 100 list items जोड़ने हैं। कौन-सा तरीका सबसे अच्छा है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: DOM Elements बनाना

createElement मेमोरी में बनाता है। append/prepend/before/after उन्हें tree में इंसर्ट करते हैं। remove() किसी तत्व को हटा देता है। DocumentFragment बेहतर प्रदर्शन के लिए इंसर्ट को एक साथ करता है।