jQuery - ဒြပ်စင်များထည့်ပါ ။
jQuery ဖြင့်၊ ၎င်းသည် ဒြပ်စင်/အကြောင်းအရာအသစ်များကို ထည့်ရန်လွယ်ကူသည်။
HTML အကြောင်းအရာအသစ်ထည့်ပါ။
အကြောင်းအရာအသစ်များထည့်ရန်အသုံးပြုသည့် jQuery နည်းလမ်းလေးခုကို ကျွန်ုပ်တို့ကြည့်ရှုပါမည်။
append()- ရွေးချယ်ထားသောဒြပ်စင်များ၏အဆုံးတွင် အကြောင်းအရာကို ထည့်သွင်းပါ။prepend()- ရွေးချယ်ထားသောဒြပ်စင်များ၏အစတွင် အကြောင်းအရာကို ထည့်သွင်းပါ။after()- ရွေးချယ်ထားသောဒြပ်စင်များပြီးနောက် အကြောင်းအရာကို ထည့်သွင်းပါ။before()- ရွေးချယ်ထားသော အစိတ်အပိုင်းများရှေ့တွင် အကြောင်းအရာကို ထည့်သွင်းပါ။
jQuery append() နည်းလမ်း
jQuery append()နည်းလမ်းသည် ရွေးချယ်ထားသော HTML ဒြပ်စင်များ၏ အဆုံးတွင် အကြောင်းအရာကို ထည့်သွင်းသည်။
ဥပမာ
$("p").append("Some appended text.");
jQuery prepend() နည်းလမ်း
jQuery prepend()နည်းလမ်းသည် ရွေးချယ်ထားသော HTML ဒြပ်စင်များ၏ အစတွင် အကြောင်းအရာကို ထည့်သွင်းသည်။
ဥပမာ
$("p").prepend("Some prepended text.");
append() နှင့် prepend() ဖြင့် ဒြပ်စင်အသစ်များစွာကို ထည့်ပါ
အထက်ဖော်ပြပါ နမူနာနှစ်ခုလုံးတွင်၊ ကျွန်ုပ်တို့သည် ရွေးချယ်ထားသော HTML ဒြပ်စင်များ၏ အစ/အဆုံးတွင် စာသား/HTML အချို့ကိုသာ ထည့်သွင်းထားသည်။
သို့သော်၊ append()နှင့် prepend()နည်းလမ်းနှစ်ခုလုံးသည် ကန့်သတ်ချက်အသစ်များကို ကန့်သတ်ချက်များအဖြစ် ယူနိုင်သည်။ အသစ်သောဒြပ်စင်များကို text/HTML (အထက်နမူနာများတွင်ကျွန်ုပ်တို့လုပ်ဆောင်ထားသကဲ့သို့) jQuery၊ သို့မဟုတ် JavaScript ကုဒ်နှင့် DOM ဒြပ်စင်များဖြင့်ထုတ်လုပ်နိုင်သည်။
အောက်ပါဥပမာတွင်၊ ကျွန်ုပ်တို့သည် ဒြပ်စင်အသစ်များစွာကို ဖန်တီးသည်။ အစိတ်အပိုင်းများကို စာသား/HTML၊ jQuery၊ နှင့် JavaScript/DOM တို့ဖြင့် ဖန်တီးထားသည်။ ထို့နောက် ကျွန်ုပ်တို့သည် နည်းလမ်းဖြင့် စာသားတွင် အစိတ်အပိုင်းအသစ်များကို ပေါင်းထည့်ပါ append()(၎င်းသည်လည်း အလုပ်ဖြစ်လိမ့်မည်
prepend())။
ဥပမာ
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery after() နှင့် before() နည်းလမ်းများ
jQuery after()နည်းလမ်းသည် ရွေးချယ်ထားသော HTML ဒြပ်စင်များပြီးနောက် အကြောင်းအရာကို ထည့်သွင်းသည်။
jQuery before()နည်းလမ်းသည် ရွေးချယ်ထားသော HTML ဒြပ်စင်များမတိုင်မီ အကြောင်းအရာကို ထည့်သွင်းသည်။
ဥပမာ
$("img").after("Some text after");
$("img").before("Some text before");
after() နှင့် before() ဖြင့် ဒြပ်စင်အသစ်များစွာကို ထည့်ပါ
ထို့အပြင်၊ နည်းလမ်းများ after()နှင့် နှစ်ခုလုံးသည် ကန့်သတ်ချက်အသစ်များကို ကန့်သတ်ချက်များအဖြစ် ယူနိုင်သည်။ before()ဒြပ်စင်အသစ်များကို စာသား/HTML (အထက်နမူနာတွင်ကျွန်ုပ်တို့လုပ်ဆောင်ခဲ့သကဲ့သို့) jQuery၊ သို့မဟုတ် JavaScript ကုဒ်နှင့် DOM ဒြပ်စင်များဖြင့် ထုတ်လုပ်နိုင်ပါသည်။
အောက်ပါဥပမာတွင်၊ ကျွန်ုပ်တို့သည် ဒြပ်စင်အသစ်များစွာကို ဖန်တီးသည်။ အစိတ်အပိုင်းများကို စာသား/HTML၊ jQuery၊ နှင့် JavaScript/DOM တို့ဖြင့် ဖန်တီးထားသည်။ after()ထို့နောက် ကျွန်ုပ်တို့သည် နည်းလမ်းဖြင့်
စာသားထဲသို့ ဒြပ်စင်အသစ်များကို ပေါင်းထည့်လိုက်ပါ (ဒါလည်း အလုပ် before()ဖြစ်မှာပါ)။
ဥပမာ
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
jQuery လေ့ကျင့်ခန်းများ
jQuery HTML အကိုးအကား
jQuery HTML နည်းလမ်းများအားလုံး၏ ပြီးပြည့်စုံသောခြုံငုံသုံးသပ်ချက်အတွက်၊ ကျွန်ုပ်တို့၏ jQuery HTML/CSS ရည်ညွှန်းချက် သို့ သွားပါ ။