জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (Node) এলিমেন্ট
নোড(এইচটিএমএল এলিমেন্ট) যোগ করা এবং বাদ দেওয়া
নতুন এইচটিএমএল এলিমেন্ট(নোড) তৈরি
এইচটিএমএল ডোমে একটি নতুন এলিমেন্ট যোগ করার জন্যে প্রথমে অবশ্যই এলিমেন্টটি(এলিমেন্ট নোড) তৈরি করতে হবে এবং তারপর আগের এলিমেন্টের সাধে যুক্ত করতে হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>
<script>
var para = document.createElement("p");
var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ");
para.appendChild(textNode);
var DIV = document.getElementById("DIV");
DIV.appendChild(para);
</script>
</body>
</html>
ফলাফল
উদাহরণের বর্ণনা
এই কোড একটি নতুন <p> এলিমেন্ট তৈরি করেঃ
var para = document.createElement("p");<p> এলিমেন্টে টেক্সট যোগ করার জন্য প্রথমে আপনাকে অবশ্যই একটি টেক্সট নোড তৈরি করতে হবে। এই কোড দ্বারা একটি টেক্সট নোড তৈরি করা হয়ঃ
var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ");তারপর আপনাকে অবশ্যই টেক্সট নোডকে <p> এলিমেন্টে যুক্ত করতে হবেঃ
para.appendChild(textNode);সবশেষে আপনি আগের তৈরিকৃত একটি এলিমেন্টের সাথে নতুন এলিমেন্টটি যুক্ত করবেন।
এই কোডটি দ্বারা আগের তৈরিকৃত এলিমেন্টকে খুঁজে বের করা হয়ঃ
var DIV = document.getElementById("DIV");এই কোড আগের তৈরিকৃত এলিমেন্টে নতুন এলিমেন্ট যুক্ত করে।
DIV.appendChild(para);নতুন এইচটিএমএল এলিমেন্ট তৈরি - insertBefore()
পূর্ববর্তী উদাহরণে appendChild() মেথডটি প্যারেন্টের শেষ চাইল্ড হিসেবে নতুন এলিমেন্ট যুক্ত করে।
আপনি যদি এটা করতে না চান তাহলে insertBefore() মেথড ব্যবহার করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>
<script>
var para = document.createElement("p");
var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ");
para.appendChild(textNode);
var DIV = document.getElementById("DIV");
var PARA = document.getElementById("para1");
DIV.insertBefore(para, PARA);
</script>
</body>
</html>
ফলাফল
বিদ্যমান এইচটিএমএল এলিমেন্ট বাদ দেওয়া
একটি এইচটিএমএল এলিমেন্ট বাদ দেওয়ার জন্য আপনাকে অবশ্যই এলিমেন্টের প্যারেন্টকে জানতে হবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>
<script>
var DIV = document.getElementById("DIV");
var PARA = document.getElementById("para1");
DIV.removeChild(PARA);
</script>
</body>
</html>
ফলাফল
node.remove() মেথডটি ডোম ৪ এ যোগ করা হয়েছে।
কিন্তু সকল ব্রাউজারে সাপোর্ট না করার কারণে আপনারা এটি ব্যবহার করবেন না।
উদাহরণের বর্ণনা
এই এইচটিএমএল ডকুমেন্টটিতে একটি <div> এলিমেন্টে দুটি চাইল্ড নোড(দুটি <p> এলিমেন্ট) রয়েছেঃ
<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>id= "DIV" যুক্ত এলিমেন্টটি খুঁজে বের করিঃ
var DIV = document.getElementById("DIV");id="para1" যুক্ত <p> এলিমেন্টটি খুঁজে বের করিঃ
var PARA= document.getElementById("para1");প্যারেন্ট থেকে চাইল্ডকে বাদ দেইঃ
DIV.removeChild(PARA);প্যারেন্ট এলিমেন্টকে নির্দেশ না করেই একটি এলিমেন্টকে মুছে ফেলতে খুবই।
কিন্তু দুঃখিত, এলিমেন্টটিকে বাদ দিতে হলে অবশ্যই এর প্যারেন্ট এলিমেন্টকে চিহ্নিত করে দিতে হবে।
একটি ভিন্ন পদ্ধতি দেওয়া হলোঃ
var PARA = ocument.getElementById("para1");
PARA.parentNode.removeChild(PARA);এইচটিএমএল এলিমেন্ট প্রতিস্থাপন
এইচটিএমএল ডোমের একটি এলিমেন্টকে প্রতিস্থাপন করতে replaceChild() মেথডটি ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>
<script>
var para = document.createElement("p");
var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ");
para.appendChild(textNode);
var DIV = document.getElementById("DIV");
var PARA = document.getElementById("para1");
DIV.replaceChild(para, PARA);
</script>
</body>
</html>
ফলাফল