কীভাবে জাভাস্ক্রিপ্টের সাথে উপাদানগুলির ভিতরে মার্কআপ যুক্ত করবেন

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

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

ধরা যাক আপনার কাছে একটি শিরোনাম সহ একটি নিবন্ধ শিরোনাম রয়েছে এবং আপনাকে এটির ঠিক নীচে একটি গুরুত্বপূর্ণ বার্তা যোগ করতে হবে, যেমন একটি সাবটাইটেল বা একটি ট্যাগলাইন৷

HTML

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

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

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

// Select h1 element inside the article element
const articleHeadline = document.querySelector('article header')

// Add content right after the h1 element
articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

বেশ শান্ত, হাহ?

আপনি যদি h1 শিরোনামের নীচের পরিবর্তে ঠিক উপরে বিষয়বস্তু যোগ করতে চান তবে কী হবে?

কোন সমস্যা নেই, আপনি প্রথমে আপনার articleHeadline-এ নতুন কন্টেন্ট বরাদ্দ করুন পরিবর্তনশীল এবং তারপর শিরোনাম বিষয়বস্তু যোগ করুন:

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