जावास्क्रिप्ट के साथ तत्वों के अंदर मार्कअप कैसे जोड़ें

जावास्क्रिप्ट के साथ किसी अन्य तत्व के अंदर एक तत्व जोड़ने का तरीका जानें।

जावास्क्रिप्ट में innerHTML . नाम की एक प्रॉपर्टी होती है जो मौजूदा तत्वों के अंदर सीधे आगे मार्कअप जोड़ता है।

मान लें कि आपके पास एक शीर्षक के साथ एक लेख शीर्षलेख है, और आपको इसके ठीक नीचे एक उपशीर्षक या टैगलाइन जैसा एक महत्वपूर्ण संदेश जोड़ना होगा।

एचटीएमएल

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

JavaScript

आइए अब 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