createElement পদ্ধতি

createElement পদ্ধতি ট্যাগের নাম প্যারামিটার হিসেবে পাস করে একটি নতুন এলিমেন্ট তৈরি করতে দেয়। তৈরি হওয়ার পরে এলিমেন্টটির সাথে সাধারণ এলিমেন্টের মতো কাজ করা যাবে, এবং এটিকে prepend, append, appendChild, insertBefore বা insertAdjacentElement পদ্ধতি ব্যবহার করে পৃষ্ঠায় যুক্ত করা যাবে।

যদি createElement-এর কাজের ফলাফল একটি ভেরিয়েবলে লেখা হয়, তবে সেই ভেরিয়েবলে এমন একটি এলিমেন্ট থাকবে যেন আমরা এটিকে querySelector বা getElementById দিয়ে পেয়েছি। একমাত্র পার্থক্য - আমাদের এলিমেন্টটি পৃষ্ঠায় স্থাপন করা থাকবে না। তবে আমরা এটির innerHTML পরিবর্তন করতে পারব, অ্যাট্রিবিউট দিতে পারব, ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারব এবং শেষ পর্যন্ত এটিকে পৃষ্ঠায় স্থাপন করতে পারব।

সিনট্যাক্স

javascriptdocument.createElement('ট্যাগের নাম');

উদাহরণ

আসুন একটি প্যারাগ্রাফ তৈরি করি, এটিতে টেক্সট সেট করি এবং #parent ব্লকের শেষে পৃষ্ঠায় রাখি:

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

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

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

parent.appendChild(p);

কোড 실행ের ফলাফল:

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

উদাহরণ

একটি ul দেওয়া আছে। আসুন এটিতে 9টি li ট্যাগ রাখি, এবং তাদের টেক্সটকে ক্রমিক নম্বর করি:

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

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

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

কোড 실행ের ফলাফল:

html<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>

উদাহরণ

আসুন এলিমেন্ট সন্নিবেশ করার সময় তাদের সাথে ইভেন্ট হ্যান্ডলার সংযুক্ত করি:

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

javascriptlet 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);
};

Результат:

আরও দেখুন