3.5. ইলিমেন্ট এর ভিতরের কন্টেন্ট

 

এখন তো খালি ইলিমেন্ট তৈরী করলাম। কিন্তু ভিতরে তো কিছু দিতে হবে ঠিক না? হ্যা সেজন্যে আমরা দুইভাবে সেই কাজ করতে পারিঃ
শুধু টেক্সটঃ আমরা যদি আমাদের ইলিমেন্ট এর ভিতরে শুধু টেক্সট ঢুকাতে চাই তাহলে ইলিমেন্ট এর textContent নামে একটা প্রপার্টি আছে, যেটা দিয়ে আমরা প্লেইন টেক্সট ঢুকাতে পারবো আমাদের ইলিমেন্ট এ। ধরি আমাদের আগের তৈরী করা newParagraph ইলিমেন্ট এ কিছু টেক্সট ঢুকাতে চাচ্ছিঃ

var chacchu = ‘safwan alamgir';
newParagraph.textContent = 'His name is: ' + Safwan Alamgir + '!';

আপনি এভাবে চাইলেও আপনার নিজের ডাটা ঢুকাতে পারবেন, সব ধরনের ফ্লেক্সিবিলিটি আছে এখানে। এখন যদি আমরা আমাদের newParagraph ইলিমেন্ট টা দেখিঃ
newParagraph;

আমাদের ইলিমেন্ট এ টেক্সট ঢুকে গেছেঃ

এখন এই textContent প্রপার্টি দিয়ে আমরা চাইলে কোনো ইলিমেন্ট এর টেক্সটও দেখতে পারি। যদি আমরা আবার আমাদের newParagraph এর কন্টেন্ট দেখতে চাইঃ
newParagraph.textContent;

 

HTML ঢুকানোঃ

এখন আমরা আগের টেকনিকে প্লেইন টেক্সট ঢুকাতে পারলেও আমরা চাইলে নতুন কোনো HTML ট্যাগ ঢুকাতে পারবো না ঐ টেকনিক দিয়ে। কিন্তু সেটার জন্যে এই ইলিমেন্টরই নতুন আরেকটা প্রপার্টি আছে innerHTML নামে। এখন যদি আমরা আমাদের newDiv এর ভিতরে পুরো HTML ট্যাগই আরেকটা ঢুকাতে চাইঃ

newDiv.innerHTML = '<p>DOM Manipulation is Fun!</p>';

 

অবশ্যই খেয়াল রাখবেন আপনার HTML যাতে স্ট্রিং আকারে থাকে। এবার যদি আমরা আমাদের newDiv ইলিমেন্টটা দেখিঃ
newDiv;
পাশের ত্রিভাজিকৃতির বাটনে ক্লিক করলে পুরো ইলিমেন্ট টা দেখতে পারবেনঃ

এখন এখানে এই innerHTML ও যেহেতু ইলিমেন্ট এর একটা প্রপার্টি, এটা দিয়ে নরমালি আমরা চাইলে যেকোনো ইলিমেন্ট এর ভিতরের HTML টাও দেখতে পারবোঃ
newDiv.innerHTML;