jQuery ਐਲੀਮੈਂਟ ਜੋੜਨਾ

ਜੇਕੇਵੀ ਦੀ ਵਰਤੋਂ ਨਾਲ ਨਵੇਂ ਐਲੀਮੈਂਟ/ਸਮਾਗਮ ਜੋੜਣਾ ਬਹੁਤ ਅਸਾਨ ਹੈ。

ਨਵੇਂ HTML ਸਮਾਗਮ ਜੋੜਨਾ

ਅਸੀਂ ਚਾਰ ਨਵੇਂ ਸਮਾਗਮ ਜੋੜਨ ਲਈ ਵਰਤਣ ਵਾਲੇ ਜੇਕੇਵੀ ਮੈਥਡਾਂ ਨੂੰ ਸਿੱਖਾਂਗੇ:

  • append() - ਚੋਣਵੇਂ ਐਲੀਮੈਂਟ ਦੇ ਅੰਤ ਵਿੱਚ ਸਮਾਗਮ ਜੋੜਨਾ
  • prepend() - ਚੋਣਵੇਂ ਐਲੀਮੈਂਟ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਸਮਾਗਮ ਜੋੜਨਾ
  • after() - ਚੋਣਵੇਂ ਐਲੀਮੈਂਟ ਦੇ ਬਾਅਦ ਸਮਾਗਮ ਜੋੜਨਾ
  • before() - ਚੋਣਵੇਂ ਐਲੀਮੈਂਟ ਦੇ ਪਹਿਲਾਂ ਸਮਾਗਮ ਜੋੜਨਾ

jQuery append() ਮੈਥਡ

jQuery append() ਮੈਥਡ ਚੋਣਵੇਂ ਐਲੀਮੈਂਟ ਦੇ ਅੰਤ ਵਿੱਚ ਸਮਾਗਮ ਜੋੜਦਾ ਹੈ。

ਉਦਾਹਰਣ

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

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

jQuery prepend() ਮੈਥਡ

jQuery prepend() ਮੈਥਡ ਚੋਣਵੇਂ ਐਲੀਮੈਂਟ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਸਮਾਗਮ ਜੋੜਦਾ ਹੈ。

ਉਦਾਹਰਣ

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

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

append() ਅਤੇ prepend() ਮੈਥਡ ਰਾਹੀਂ ਕਈ ਨਵੇਂ ਐਲੀਮੈਂਟਾਂ ਜੋੜਨਾ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਕੇਵਲ ਚੋਣਵੇਂ ਐਲੀਮੈਂਟ ਦੇ ਸ਼ੁਰੂ/ਅੰਤ ਵਿੱਚ ਟੈਕਸਟ/HTML ਜੋੜਿਆ ਹੈ。

append() ਅਤੇ prepend() ਮੈਥਡ ਪੈਰਾਮੀਟਰ ਰੂਪ ਵਿੱਚ ਅਣਗਿਣਤ ਨਵੇਂ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰ ਸਕਦੇ ਹਨ। ਜੇਕ੍ਰ ਜੇਕੇਵੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਕਸਟ/HTML ਬਣਾਉਣ ਹੋਵੇ (ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਰਗਾ), ਜਾਂ JavaScript ਕੋਡ ਅਤੇ DOM ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਕਈ ਨਵੇਂ ਐਲੀਮੈਂਟਾਂ ਬਣਾਉਂਦੇ ਹਾਂ। ਇਹ ਐਲੀਮੈਂਟ ਟੈਕਸਟ/HTML, jQuery ਜਾਂ JavaScript/DOM ਦੇ ਮਾਧਿਅਮ ਨਾਲ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ। ਫਿਰ ਅਸੀਂ append() ਮੈਥਡ ਦੇ ਮਾਧਿਅਮ ਨਾਲ ਇਹ ਨਵੇਂ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਟੈਕਸਟ ਵਿੱਚ ਜੋੜ ਦੇਖੀਏ (prepend() ਵੀ ਇਸ ਤਰ੍ਹਾਂ ਹੀ ਕਰਦਾ ਹੈ):

ਉਦਾਹਰਣ

function appendText()
{
var txt1="<p>Text.</p>";               // ਐਲੀਮੈਂਟ ਬਣਾਉਣ ਲਈ HTML ਵਰਤੋਂ ਕਰੋ
var txt2=$("<p></p>").text("Text.");   // ਜੀਨੇਰੇਟ ਨਵੇਂ ਐਲੀਮੈਂਟ ਲਈ jQuery ਵਰਤੋਂ ਕਰੋ
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);          // ਇਮੇਜ ਦੇ ਬਾਅਦ ਨਵੇਂ ਅੰਗਾਮ ਜੋੜਨਾ
}

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

jQuery HTML ਸੰਦਰਭ ਮੈਨੂਅਲ

ਜੇਕਰ ਤੁਸੀਂ jQuery HTML ਮੈਥਡ ਦੀ ਪੂਰੀ ਸਮੱਗਰੀ ਦੀ ਜਾਣਕਾਰੀ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਹੇਠਲੇ ਸੰਦਰਭ ਮੈਨੂਅਲ ਨੂੰ ਦੇਖੋ: