Assolomu aleykum OMUC!!!

Kirish:

JQuery yordamida yangi elementlar yoki tarkib qo'shish oson.

Yangi HTML tarkibini qo'shish:

Biz yangi tarkibni qo'shishda ishlatiladigan to'rtta jQuery usulini ko'rib chiqamiz.

  • append() - Tanlangan elementlarning oxiriga tarkibni qo'shadi
  • prepend() - Tanlangan elementlarning boshiga tarkibni qo'shadi
  • after() - tanlangan elementlardan keyin tarkibni qo'shadi
  • before() - Tanlangan elementlardan oldin tarkibni qo'shadi

jQuery append() metodi

JQuery append() usuli tanlangan HTML elementlarining oxiriga tarkibni qo'shadi.

Misol

$("p").append("Biroz matn qo'shamiz.");

JQuery prepend() usuli

JQuery prepend() usuli tanlangan HTML elementlarining boshlanishiga tarkib qo'shadi.

Misol

$("p").prepend("Biroz matn qo'shamiz.");

Append() va prepend() bilan bir nechta yangi elementlarni qo'shishingiz mumkin. Yuqoridagi ikkala misolda ham biz tanlangan HTML elementlarining boshida yoki oxirida faqat bir nechta matn yoki HTML kiritdik. Biroq, append() va prepend() usullari ham cheksiz ko'p yangi elementlarni parametr sifatida qabul qilishi mumkin. Yangi elementlar matn yoki HTML (yuqoridagi misollarda bo'lgani kabi), jQuery yoki JavaScript kodi va DOM elementlari yordamida yaratilishi mumkin. Quyidagi misolda biz bir nechta yangi elementlarni yaratamiz. Elementlar matn yoki HTML, jQuery va JavaScript yoki DOM bilan yaratilgan. So'ngra yangi elementlarni append() usuli bilan matnga qo'shamiz (bu prepend() uchun ham ishlaydi):

Misol

function appendText() {
  var txt1 = "<p>Matn.</p>";                
  var txt2 = $("<p></p>").text("Matn. ");  
  var txt3 = document.createElement("p"); 
  txt3.innerHTML = "Matn. ";
  $("body").append(txt1, txt2, txt3); 
}

JQuery after() va before() metodlari:

JQuery after() usuli tanlangan HTML elementlaridan so'ng tarkibni qo'shadi. JQuery before() usuli tanlangan HTML elementlaridan oldin tarkibni qo'shadi.

Misol

$("img").after("Biroz matndan so'ng");

$("img").before("Biroz matndan oldin");

After() va before() bilan bir nechta yangi elementlarni qo'shish mumkin. Bundan tashqari, after() va before() usullari ham cheksiz ko'p yangi elementlarni parametr sifatida qabul qilishi mumkin. Yangi elementlar matn yoki HTML (yuqoridagi misolda bo'lgani kabi), jQuery yoki JavaScript kodi va DOM elementlari yordamida yaratilishi mumkin. Quyidagi misolda biz bir nechta yangi elementlarni yaratamiz. Elementlar matn yoki HTML, jQuery va JavaScript yoki DOM bilan yaratilgan. Keyin yangi elementlarni matnga after() usuli bilan kiritamiz (bu ((bundan oldin ham ishlagan bo'lishi mumkin)):

Misol

function afterText() {
  var txt1 = "<b>I </b>";                     
  var txt2 = $("<i></i>").text("love ");     
  var txt3 = document.createElement("b");    
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          
}

Xulosa:

Bugun siz bilan jquery orqali qo'shish metodlarini o'rgandik. Umid qilamanki bu maqolamdan ham o'zingizga yangi bilim va tajriba oldingiz. Siz bilan Jahongir Sobirov bo'ldi. Hammaga omad!