জাভাস্ক্রিপ্ট দিয়ে এলিমেন্টের ভিতরে মার্কআপ যোগ করা

জাভাস্ক্রিপ্ট দিয়ে একটি এলিমেন্টের ভিতরে অন্য একটি এলিমেন্ট কীভাবে যোগ করতে হয় তা শিখুন।

জাভাস্ক্রিপ্টে innerHTML নামক একটি প্রোপার্টি আছে যা বিদ্যমান এলিমেন্টের ভিতরে মার্কআপ যোগ করাকে সহজ করে দেয়।

মান লিন আপনার কাছে একটি আর্টিকেল হেডার আছে হেডলাইনের সাথে, এবং আপনাকে তার ঠিক নিচে একটি গুরুত্বপূর্ণ মেসেজ যোগ করতে হয়, সাবটাইটল বা ট্যাগলাইনের মত।

HTML

<article> <header> <h1>Headline for your article</h1> </header> </article>

জাভাস্ক্রিপ্ট

এখন h1 হেডলাইনের ঠিক পরে ট্যাগলাইনের জন্য কিছু HTML মার্কআপ যোগ করি।

// আর্টিকেল এলিমেন্টের ভিতরে h1 এলিমেন্ট সিলেক্ট করুন const articleHeadline = document.querySelector('article header') // h1 এলিমেন্টের ঠিক পরে কন্টেন্ট যোগ করুন articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

খুব কুল, ঠিক নাকি?

ক्या होगा যদি আপনি h1 হেডলাইনের নিচে নয়, উপরে কন্টেন্ট যোগ করতে চান?

সমস্যা নেই, আপনি প্রথমে নতুন কন্টেন্টটি আপনার articleHeadline ভেরিয়েবলে এসাইন করুন এবং তারপর হেডলাইন কন্টেন্টটি যোগ করুন:

articleHeadline.innerHTML = '<p>Extra content right before the headline.</p>' + articleHeadline.innerHTML