जीकेरी एलीमेंट जोड़ना

जीकेरी के द्वारा, नए एलीमेंट/सामग्री जोड़ना बहुत सरल है。

नए एचटीएमएल सामग्री जोड़ना

हम चार जीकेरी विधियों को सीखेंगे जो नए सामग्री जोड़ने के लिए उपयोग की जाती हैं:

  • append() - चयनित एलीमेंट के अंत में सामग्री जोड़ना
  • prepend() - चयनित एलीमेंट के शुरू में सामग्री जोड़ना
  • after() - चयनित एलीमेंट के बाद सामग्री जोड़ना
  • before() - चयनित एलीमेंट के पहले सामग्री जोड़ना

जीकेरी append() विधि

जीकेरी append() विधि चयनित एलीमेंट के अंत में सामग्री जोड़ती है。

उदाहरण

$("p").append("Some appended text.");

स्वयं प्रयोग करें

जीकेरी prepend() विधि

जीकेरी prepend() विधि चयनित एलीमेंट के शुरू में सामग्री जोड़ती है。

उदाहरण

$("p").prepend("Some prepended text.");

स्वयं प्रयोग करें

append() और prepend() विधियों के द्वारा कई नए एलीमेंट जोड़ना

उपरी उदाहरण में, हम केवल चयनित एलीमेंट के शुरू/अंत में टेक्स्ट/एचटीएमएल जोड़ते हैं。

बदले हुए, append() और prepend() विधियां अनगिनत संख्या के नए एलीमेंटों को पारामीट के रूप में प्रस्तुत कर सकती हैं। जीकेरी द्वारा टेक्स्ट/एचटीएमएल (जैसे उपरी उदाहरण) या जेवेस्क्रिप्ट कोड और डॉम एलीमेंट के रूप में टेक्स्ट बनाया जा सकता है。

इस उदाहरण में, हम कई नए एलीमेंट को बनाते हैं। ये एलीमेंट टेक्स्ट/एचटीएमएल, जीकेरी या जेवेस्क्रिप्ट/डॉम द्वारा बनाए जाते हैं। फिर हम इन नए एलीमेंट को टेक्स्ट में जोड़ने के लिए append() विधि का उपयोग करते हैं (prepend() भी इसी तरह है):

उदाहरण

function appendText()
{
var txt1="<p>Text.</p>";               // एचटीएमएल द्वारा नए एलीमेंट को बनाया जाता है
var txt2=$("<p></p>").text("Text.");   // जीकेरी द्वारा नए एलीमेंट को बनाया जाता है
var txt3=document.createElement("p");  // DOM के माध्यम से नए तत्व बनाएँ
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // नए तत्व जोड़ें
{}

स्वयं प्रयोग करें

jQuery after() और before() विधियाँ

jQuery after() विधि चुने हुए तत्व के बाद सामग्री जोड़ती है。

jQuery before() विधि चुने हुए तत्व के पहले सामग्री जोड़ती है。

उदाहरण

$("img").after("Some text after");
$("img").before("Some text before");

स्वयं प्रयोग करें

द्वारा after() और before() विधियों नए तत्वों को जोड़ें

after() और before() विधियाँ अनगिनत संख्या के प्रायोगिक तत्वों को प्राप्त कर सकती हैं। नए तत्वों को text/HTML, jQuery या JavaScript/DOM के माध्यम से बनाया जा सकता है。

नीचे दिए गए उदाहरण में, हम कई नए तत्वों को बनाते हैं। ये तत्व text/HTML, jQuery या JavaScript/DOM के माध्यम से बनाए जा सकते हैं। फिर हम after() विधि के द्वारा इन नए तत्वों को लेख में जोड़ते हैं (before() के लिए भी प्रयोगी है):

उदाहरण

function afterText()
{
var txt1="<b>I </b>";                    // HTML के माध्यम से नए तत्व बनाएँ
var txt2=$("<i></i>").text("love ");     // jQuery के माध्यम से नए तत्व बनाएँ
var txt3=document.createElement("big");  // DOM के माध्यम से नए तत्व बनाएँ
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // img के बाद नए तत्व जोड़ें
{}

स्वयं प्रयोग करें

jQuery HTML संदर्भ पुस्तिका

यदि आप jQuery HTML विधियों के पूर्ण सामग्री के बारे में जानना चाहते हैं, तो नीचे दिए गए संदर्भ पुस्तिका को देखें: