createElement मेथड

createElement मेथड आपको एक नया एलिमेंट बनाने की अनुमति देता है, पैरामीटर में टैग का नाम पास करके। बनाने के बाद, एलिमेंट के साथ सामान्य एलिमेंट की तरह काम किया जा सकता है, और इसे prepend, append, appendChild, insertBefore या insertAdjacentElement मेथड का उपयोग करके पेज पर जोड़ा जा सकता है।

अगर createElement के काम के परिणाम को एक वेरिएबल में लिखा जाए, तो उस वेरिएबल में ऐसा एलिमेंट होगा, जैसे कि हमने इसे querySelector या getElementById के माध्यम से प्राप्त किया हो। एकमात्र अंतर - हमारा एलिमेंट पेज पर प्लेस नहीं होगा। इसके अलावा, हम इसका innerHTML बदल सकते हैं, एट्रिब्यूट्स बदल सकते हैं, इवेंट हैंडलर्स लगा सकते हैं और अंत में इसे पेज पर प्लेस कर सकते हैं।

सिंटैक्स

document.createElement('टैग का नाम');

उदाहरण

आइए एक पैराग्राफ बनाएं, उसके लिए टेक्स्ट सेट करें और #parent ब्लॉक के अंत में पेज पर रखें:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

कोड निष्पादित करने का परिणाम:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

उदाहरण

ul दिया गया है। आइए इसमें 9 li टैग रखें, और उनका टेक्स्ट क्रम संख्या बनाएं:

<ul id="parent"></ul>

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

कोड निष्पादित करने का परिणाम:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

उदाहरण

आइए एलिमेंट्स इन्सर्ट करते समय उनसे इवेंट हैंडलर्स बांधें:

<ul id="parent"></ul>

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

यह भी देखें

cloneNode मेथड,
जिसकी मदद से आप एलिमेंट को क्लोन कर सकते हैं
createTextNode मेथड,
जिसकी मदद से आप एक नया टेक्स्ट नोड बना सकते हैं