HTML DOM-এ একটি নতুন এলিমেন্ট যোগ করতে হলে প্রথমে সেটি তৈরি করতে হয় এবং তারপর বিদ্যমান এলিমেন্টের সাথে অ্যাপেন্ড (append) করতে হয়।
পালন করতে হবে ধাপগুলো
১) প্রথমে একটি div সেকশন তৈরি করুন এবং <p> ট্যাগ ব্যবহার করে কিছু টেক্সট যোগ করুন।
২) document.createElement("p") ব্যবহার করে একটি এলিমেন্ট <p> তৈরি করুন।
৩) document.createTextNode() ব্যবহার করে একটি টেক্সট তৈরি করুন যেটি উপরের তৈরি করা এলিমেন্টে ("p") ইনসার্ট করা হবে।
৪) appendChild() ব্যবহার করে তৈরি করা এলিমেন্টটিকে, টেক্সটসহ, বিদ্যমান div ট্যাগের সাথে অ্যাপেন্ড করুন।
এভাবে একটি নতুন এলিমেন্ট (<p>) তৈরি হয়ে বিদ্যমান এলিমেন্ট (<div>)-এর সাথে যুক্ত হয়।
উদাহরণ
নিচের উদাহরণে, প্রাথমিকভাবে div সেকশনে শুধু ২টি টেক্সট রয়েছে। পরে একটি টেক্সট তৈরি করে div সেকশনে যোগ করা হয়েছে আউটপুটে দেখানো হয়েছে।
<html> <body> <div id="new"> <p id="p1">Tutorix</p> <p id="p2">Tutorialspoint</p> </div> <script>
var tag = document.createElement("p");
var text = document.createTextNode("Tutorix is the best e-learning platform");
tag.appendChild(text);
var element = document.getElementById("new");
element.appendChild(tag);
</script> </body> </html>
আউটপুট
Tutorix Tutorialspoint Tutorix is the best e-learning platform
