HTML DOM createElement() মেথড

HTML DOM createElement() মেথড জাভাস্ক্রিপ্ট ব্যবহার করে ডাইনামিক্যালি একটি HTML এলিমেন্ট তৈরি করতে ব্যবহৃত হয়। এটি প্যারামিটার হিসেবে এলিমেন্টের নাম নেয় এবং সেই এলিমেন্ট নোডটি তৈরি করে। নতুন তৈরি এলিমেন্টটি DOM-র অংশ बनाने appendChild() মেথড ব্যবহার করতে হবে।

সিনট্যাক্স

createElement() মেথডের সিনট্যাক্স নিচে দেওয়া হলো -

document.createElement(nodename)

উদাহরণ

createElement() মেথডের একটি উদাহরণ দেখি -

<!DOCTYPE html> <html> <body> <h1>createElement() example</h1> <p>নিচের বাটনে ক্লিক করুন আরও বাটন তৈরি করতে</p> <button onclick="createButton()">CREATE</button> <br><br> <script> var i=0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "BUTTON" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে -

HTML DOM createElement() মেথড

CREATE বাটনে তিনবার ক্লিক করলে। এক ক্লিক এক বাটনের জন্য -

HTML DOM createElement() মেথড

উপরের উদাহরণে -

আমরা একটি CREATE বাটন তৈরি করেছি যা ইউজার ক্লিক করলে createButton() মেথড এক্সিকিউট করবে।

<button onclick="createButton()">CREATE</button>

createButton() ফাংশন ডকুমেন্ট অবজেক্টের createElement() মেথড ব্যবহার করে একটি <button> এলিমেন্ট তৈরি করে। innerHTML ব্যবহার করে আমরা বাটনের উপরে দেখানো টেক্সট সেট করি। আমরা ডকুমেন্ট অবজেক্টের createElement() মেথড ব্যবহার করে আরেকটি <br> এলিমেন্ট তৈরি করি। <button> এলিমেন্ট এবং <br> এলিমেন্ট দুটোই তারপর document.body-র appendChild() মেথড ব্যবহার করে ডকুমেন্ট বডিতে অ্যাপেন্ড করা হয় -

var i=0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "BUTTON" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); }