Salom! JavaScript-dan foydalanib, siz nafaqat sahifadagi elementlarni topishingiz mumkin (buni qanday qilish haqida o'qing), balki elementlarni dinamik ravishda yaratishingiz va ularni DOMga qo'shishingiz mumkin. Buni qanday qilish ushbu darsda muhokama qilinadi.

Yaratish uchun yangi element veb-sahifada - hujjat ob'ektida quyidagi usullar mavjud:

• createElement(elementName) : yangi element yaratadi, har qanday HTML sahifa tegi parametr sifatida uzatilishi kerak, HTML elementini qaytaradi
• createTextNode(text): Matn tugunini yaratadi va xuddi shunday qaytaradi.

Element qo'shish

Keling, kichik bir misolni ko'rib chiqaylik:

Var el = document.createElement("div"); var elText = document.createTextNode("Salom dunyo");

Misoldan ko'rinib turibdiki, element o'zgaruvchisi yangi div elementiga havolani saqlaydi. Biroq, siz tushunganingizdek, elementlarni yaratish etarli emas, ular hali ham veb-sahifaga qo'shilishi kerak. Axir, biz elementlarni shu tarzda yaratganimizda, ular qandaydir virtual maydonda yoki xotirada bo'lib ko'rinadi, lekin ularni veb-sahifada ko'rsatish uchun maxsus usullar mavjud.

Veb-sahifaga elementlar qo'shish uchun quyidagi usullardan foydalaniladi:

• appendChild(newNode): ushbu usul chaqirilgan elementning oxiriga yangi element qo'shadi
• insertBefore(newNode, referenceNode): ikkinchi parametr sifatida belgilangan tugun oldiga yangi tugun qo'shadi.

AppendChild usuli yordamida veb-sahifaga element biriktirish misolini ko‘rib chiqamiz:

Maqola sarlavhasi

Birinchi xatboshi

Ikkinchi xatboshi

var article = document.querySelector("div.article"); // element yaratish var el = document.createElement("h3"); // u uchun matn yaratish var elTxt = document.createTextNode("Salom dunyo"); // elementga matnni asosiy element sifatida qo'shish el.appendChild(elTxt); // div blokiga element qo'shish article.appendChild(el);

Misol oddiy h3 sarlavha elementi va matn tugunini yaratdi. Keyin matn tugun sarlavha elementiga qo'shiladi. Keyin sarlavha sahifada ko'rinishi uchun veb-sahifa elementlaridan biriga qo'shiladi.

Ammo element ichida matn yaratish uchun qo'shimcha matn tuguniga ega bo'lish shart emas, buning uchun matnni to'g'ridan-to'g'ri elementga belgilash imkonini beruvchi textContent xususiyati mavjud.

Var el = document.createElement("h3"); el.textContent = "Salom, men nomman";

Bunday holda, matn to'g'ridan-to'g'ri o'rnatilganda, matn bevosita yaratiladi.

Shuningdek, keling, ushbu elementni div ning tugunlari to'plamining boshiga qanday qo'shishni ko'rib chiqaylik:

Var artDiv = document.querySelector("div.article"); // element yaratish var el = document.createElement("h2"); // u uchun matn yaratish var eltxt = document.createTextNode("Salom dunyo"); // elementga matnni asosiy element sifatida qo'shish el.appendChild(eltxt); // qo'shimchadan oldin bo'ladigan birinchi elementni oling var firstEl = artDiv.firstChild.nextSibling; // birinchi tugundan oldin div blokiga element qo'shing artDiv.insertBefore(el, firstEl);

Agar siz to'satdan ikkinchi, uchinchi yoki boshqa joyga yangi tugun qo'shishingiz kerak bo'lsa, unda siz birinchi Child/lastChild yoki nextSibling/previousSibling xususiyatlaridan foydalanib uni kiritishingiz kerak bo'lgan tugunni topishingiz kerak.

Elementni nusxalash

Elementlar tarkibida juda murakkab bo'lgan holatlar mavjud va ularni nusxalash osonroq. Buning uchun alohida cloneNode() usuli qo'llaniladi.

Var artDiv = document.querySelector("div.article"); // articleDiv elementini klonlash var newArtDiv = artDiv.cloneNode(true); // asosiy elementning oxiriga qo'shing document.body.appendChild(newArtDiv);

Siz mantiqiy qiymatni cloneNode() usuliga parametr sifatida o'tkazishingiz kerak: agar siz "true"ga o'tsangiz, element barcha tugunlar bilan birga nusxalanadi; agar siz noto'g'ri o'tsangiz, u tugunlarsiz nusxalanadi. IN bu misolda biz elementni uning mazmuni bilan birga nusxalaymiz va uni veb-sahifaning oxiriga qo'shamiz.

Elementni olib tashlash

Elementni olib tashlash uchun siz removeChild() usulini chaqirishingiz kerak. Bu usul bola tugunlaridan birini olib tashlaydi:

Var artDiv = document.querySelector("div.article"); // biz yo'q qiladigan tugunni toping - birinchi xatboshi var removNode = document.querySelectorAll("div.article p"); // tugunni olib tashlang artDiv.removeChild(removNode);

Ushbu misol div blokidan birinchi xatboshini olib tashlaydi

Elementni almashtirish

Bir elementni boshqasiga almashtirish uchun replaceChild(newNode, oldNode) usulidan foydalaning. Bu usul 1-parametr sifatida yangi elementni oladi, u 2-parametr sifatida qabul qilingan eski elementni almashtiradi.

Var artDiv = document.querySelector("div.article"); // biz almashtiradigan tugunni toping - birinchi xatboshi var old = document.querySelectorAll("div.article p"); // element yaratish var new = document.createElement("h3"); // u uchun matn yaratish var elemtxt = document.createTextNode("Salom dunyo"); // elementga matnni asosiy element sifatida qo'shish new.appendChild(elemtxt); // eski tugunni yangisiga almashtiring artDiv.replaceChild(yangi, eski);

Ushbu misolda biz birinchi xatboshini o'zimiz yaratgan h2 sarlavhasi bilan almashtiramiz.

NATIJALAR.

Element yaratish uchun quyidagi usullardan foydalaniladi:

document.createElement(teg) - yangi element yaratadi.

document.createTextNode(matn) - matn tugunini yaratadi

Tugunlarni kiritish va olib tashlash usullari

• parent.appendChild(el) - elementni mavjud elementning oxiriga qo'shadi
• parent.insertBefore(el, nextSibling) - elementni mavjud elementdan oldin kiritadi
• parent.removeChild(el) - elementni olib tashlaydi
• parent.replaceChild(newElem, el) - bir elementni boshqasiga almashtiradi
• parent.cloneNode(bool) - elementdan nusxa ko'chiradi, agar bool=true parametr bo'lsa, u holda element barcha asosiy elementlar bilan, agar noto'g'ri bo'lsa, unda asosiy elementlarsiz nusxalanadi.

Vazifalar Elementlarni kiritish funktsiyasi

InsertAfter(newEl,oldEl) funksiyasini yozing, u funksiyaning o‘ziga birin-ketin elementlarni kiritadi, elementlarning o‘zi parametr sifatida uzatiladi.

Agar siz JavaScript-ni yozgan bo'lsangiz va shunga o'xshash narsalarni yozishingiz kerak bo'lsa:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Haqiqiy baliq baliqlari."));
var div = document.createElement("div");
div.setAttribute("id", "yangi");
div.appendChild(p);

keyin bu siz uchun foydali bo'lishi mumkin.

Muammo: Agar siz bir-birining ichiga joylashtirilgan bir nechta elementlarni yaratsangiz, kod juda murakkab bo'ladi.

Muammoni hal qilish uchun oddiy vositani taklif qilaman - create() funktsiyasi (quyida manba kodi). Masalan, matnning paragrafini yaratamiz:
var el = create("p", ( ), "Alvido, sevgi!");

Yoki xatboshi va ichidagi havolali div:
var div = create("div", ( id: "yangi", uslub: "fon:#fff" ),
yaratish("p", ( tekislang: "markaz" ),
"kirish:",
yaratish("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg" ),
"rasm"),
": oxiri")
);

Yoki bu erda biz jadval tuzamiz:
var holder = document.getElementById("holder2");
var jadvali;
var td;
holder.appendChild(
jadval =
yaratish ("jadval", (id: "xunuk", cols: 3),
yaratish ("tbody", (),
yaratish ("tr", (),
create("td", (kengligi: "10%" ),
"Salom"),
td =
create("td", (uslub: "fon: #fcc"),
"U yerda")
create("td", (sinf: "special2"), "hamma joyda")
)
);

Iltimos, diqqat qiling: 1. IE tbody elementini talab qiladi, aks holda jadvalni ko'rsatishni rad etadi.
2. Class atributi biror narsaga zid keladi, shuning uchun uni Class deb yozishingiz kerak. Bu natijaga hech qanday ta'sir ko'rsatmaydi.
3. Misoldagi jadval = va tr = yaratilgan ichki o'rnatilgan ob'ektlarni ular bilan keyingi ishlash uchun saqlash imkonini beradi.
4. Ushbu kod IE, Mozilla va Operada ishlaydi. Funktsiyaning o'zi yaratish (nom, atributlar) funksiyasi (
var el = document.createElement(nom);
if (atributlar turi == "ob'ekt") (
for (var i atributlarda) (
el.setAttribute(i, atributlar[i]);

Agar (i.toLowerCase() == "sinf") (
el.className = atributlar[i]; // IE muvofiqligi uchun

) else if (i.toLowerCase() == "uslub") (
el.style.cssText = atributlar[i]; // IE muvofiqligi uchun
}
}
}
uchun (var i = 2;i< arguments.length; i++) {
var val = argumentlar[i];
if (typeof val == "string") ( val = document.createTextNode(val) );
el.appendChild(val);
}
qaytar el;
}

Ivan Kurmanovga g'oya uchun rahmat aytishimiz kerak,
Ishchi misollar bilan original maqola:

js elementini olib tashlang (12)

1-qadam. Elementlarni tayyorlang:

var element = document.getElementById("ElementToAppendAfter"); var newElement = document.createElement("div"); var elementParent = element.parentNode;

2-qadam. Keyin qo'shing:

elementParent.insertBefore(newElement, element.nextSibling);

JavaScript-da insertBefore() mavjud, lekin qanday qilib elementni kiritishim mumkin keyin jQuery yoki boshqa kutubxonadan foydalanmasdan boshqa element?

To'g'ridan-to'g'ri JavaScript bo'ladi:

Qo'shish:

Element.parentNode.insertBefore(newElement, element);

Keyin qo'shing:

Element.parentNode.insertBefore(newElement, element.nextSibling);

Biroq, foydalanish qulayligi uchun ba'zi prototiplarni u erga tashlang

Quyidagi prototiplarni yaratish orqali siz ushbu funktsiyani to'g'ridan-to'g'ri yangi yaratilgan elementlardan chaqirishingiz mumkin bo'ladi.

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) prototipi

Element.prototype.appendBefore = funktsiya (element) ( element.parentNode.insertBefore(this, element); ),false;

.appendAfter(element)Prototipi

Element.prototype.appendAfter = funktsiya (element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false;

Va uni amalda ko'rish uchun quyidagi kod parchasini ishga tushiring

/* Elementni qo‘shadi NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Elementni NeighborElement SO‘ng qo‘shadi */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Yangi yetim element ob'ektini odatiy yaratish va sozlash */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Yangi element"; NewElement.id = "NewElement"; /* Yuqorida aytib o'tilgan prototiplardan foydalanishdan oldin -Yoki-KEYIN NewElement qo'shing */ NewElement.appendAfter(document.getElementById("Neighbor2")); div (matnni tekislash: markaz; ) #Qo'shni (rang: jigarrang; ) #NewElement (rang: yashil; ) Qo'shni 1 Qo'shni 2 Qo'shni 3

Ideal holda insertAfter MDN ga o'xshash ishlashi kerak. Quyidagi kod quyidagilarni bajaradi:

• Agar bolalar bo'lmasa, yangi tugun qo'shiladi
• Agar mos yozuvlar tugunlari bo'lmasa, yangi tugun qo'shiladi
• Agar mos yozuvlar tugunidan keyin tugun bo'lsa, yangi tugun qo'shiladi
• Agar havola qilingan tugunning bolalari bo'lsa, yangi tugun o'sha birodardan oldin kiritiladi
• Yangi tugunni qaytaradi

Tugun kengaytmasi

Node.prototype.insertAfter = function(tugun, referenceNode) ( agar (tugun) this.insertBefore(tugun, referenceNode && referenceNode.nextSibling); qaytish tugun; );

Bitta umumiy misol

Node.parentNode.insertAfter(newNode, tugun);

Kod ishlayotganiga qarang

// Birinchi kengaytirish Node.prototype.insertAfter = function(tugun, referenceNode) ( if (tugun) this.insertBefore(tugun, referenceNode && referenceNode.nextSibling); return tugun; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "Birinchi yangi element"; newNode.style.color = "#FF0000"; document.getElementById("bolalarsiz").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Ikkinchi yangi element"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-tugun").insertAfter(newNode); referenceNode = document.getElementById("no-singling-after"); newNode = document.createElement("li"); newNode.innerText = "Uchinchi yangi element"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("aka-ukadan keyin"); newNode = document.createElement("li"); newNode.innerText = "To'rtinchi yangi element"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); Bolalar yo'q Malumot tugunlari yo'q

• Birinchi element

Keyin aka-uka yo'q

• Birinchi element

Keyin birodar

• Birinchi element
• Uchinchi element

insertBefore() usuli parentNode.insertBefore() kabi ishlatiladi. Shunday qilib, bunga taqlid qilish va parentNode.insertAfter() usulini yaratish uchun biz quyidagi kodni yozishimiz mumkin.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // karim79 yechimiga asoslangan); // kerakli tutqichlarni olish var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // yaratish

uchinchi xatboshi

var txt = document.createTextNode("uchinchi xatboshi"); var paragraph = document.createElement("p"); paragraph.appendChild(txt); // endi biz uni insertBefore() parent.insertAfter(paragraf, refElem) kabi chaqirishimiz mumkin;

birinchi xatboshi

ikkinchi xatboshi

E'tibor bering, ushbu maqolada aytilganidek, DOM kengayishi siz uchun to'g'ri echim bo'lmasligi mumkin.

Biroq, bu maqola 2010 yilda yozilgan va hozir hamma narsa boshqacha bo'lishi mumkin. Shunday qilib, o'zingiz qaror qiling.

Barcha stsenariylarni boshqarishga imkon beradi

Funktsiya insertAfter(newNode, referenceNode) ( if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if(!referenceNode) document.body.appendChild(newNode); aks holda; (!referenceNode.nextSibling) document.body.appendChild(newNode); else referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); )

Ushbu kod kichik CSS faylini satrga kiritilgan oxirgi mavjud boladan so'ng darhol havola elementini kiritish uchun ishlaydi.

Var raf, cb=function())( //yangi tugun yaratish var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //oxirgi tugundan keyin kiriting var nodes=document.getElementsByTagName("link"); //mavjud tugunlar var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(havola, lastnode. keyingi birodar); ); //qo'yishdan oldin tekshiring try ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Bilaman, bu savolga juda ko'p javoblar bor, lekin ularning hech biri mening aniq talablarimga javob bermadi.

Menga parentNode.insertBefore ning mutlaqo teskari xatti-harakatiga ega bo'lgan funksiya kerak - ya'ni u null referenceNode ni qabul qilishi kerak (bu javobda qabul qilinmaydi) va insertBefore ichiga kiritiladigan joy oxiri insertBundan oldin u kiritishi kerak boshlanishi, chunki aks holda bu funksiya bilan asl joyga qo'yishning hech qanday usuli bo'lmaydi; xuddi shu sababga ko'ra insertBefore qo'shimchalari oxirida.

Null referenceNode sizdan insertBefore ota-onani talab qilganligi sababli, biz ota-onani bilishimiz kerak - insertBefore parentNode usulidir, shuning uchun u ota-onaning parentNode-ga shu tarzda kirish huquqiga ega; bizning funktsiyamiz mavjud emas, shuning uchun biz asosiy elementni parametr sifatida o'tkazishimiz kerak.

Olingan funktsiya quyidagicha ko'rinadi:

Funktsiya insertAfter(parentNode, newNode, referenceNode) ( parentNode.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: parentNode.firstChild); )

Agar (! Node.prototype.insertAfter) ( Node.prototype.insertAfter = function(newNode, referenceNode) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); ); )

node1.after(tugun2) ni yaratadi,

bu erda tugun1 va tugun2 DOM tugunlaridir.

Ushbu postda men sizga JavaScript-dagi ob'ektga qanday qilib element qo'shish yoki olib tashlashni aytmoqchiman. Bu juda oddiy, lekin ko'plab yangi boshlanuvchilar, men kabi, ko'pincha bu haqda chalkashib ketishadi.

Masalan, ob'ekt yarataylik var obj = ( ism: "alex", familiya: "petrov", veb-sayt: "sayt", );

Bizda ism, familiya va veb-sayt kabi ma'lumotlarni o'z ichiga olgan oddiy ob'ekt mavjud. Ma'lumotlar mutlaqo har qanday bo'lishi mumkin, ammo bu postning maqsadlari uchun aynan shunday bo'ladi.

Yangi element qo'shish obj.country = "ru"; // qo'shadi yangi kalit"mamlakat" qiymati "ru" ob'ektga obj["city"] = "Moskva"; // yangi kalit ham qo'shiladi, faqat "Moskva" qiymatiga ega "shahar"

Yuqoridagi kod tushunarli, ammo aniqlik kiritish uchun: "." yordamida ob'ekt sintaksisidagi ob'ektga yangi qiymatlarni qo'shishingiz mumkin. va kalit yoki odatiy massiv formati. Agar siz uni massiv sifatida e'lon qilsangiz, obj hali ham ob'ekt bo'lib qoladi, chunki siz uni avval () tufayli shunday belgilagansiz.

Ob'ekt ichida ob'ekt yaratish obj.other_obj = (); // obj ichida other_obj yangi qiymatini yarating va uni ob'ektga aylantiring

Endi u erga ba'zi ma'lumotlarni qo'shamiz:

Obj.other_obj.first = "yangi ob'ektning birinchi kaliti"; obj.other_obj.second = "ikkinchi";

Biz other_obj ichida ikkita yangi qiymat yaratdik, birinchi va ikkinchi.

Elementni o'chirish obj.nameni o'chirish; // qaytaradi: rost

Ob'ektlardan elementlarni olib tashlashi mumkin bo'lgan delete dan foydalanishingiz mumkin. Butun ob'ektni shu tarzda o'chira olmaysiz, lekin agar kerak bo'lsa, buni qilishingiz mumkin:

Obj = (); // Ob'ektni yana bo'sh qiladi

Hammasi shu, agar sizda hali ham JavaScript-dagi ob'ektlar haqida savollaringiz bo'lsa, quyida sharh yozing, men sizga yordam berishga harakat qilaman.

Bu jQuery usullarining mahalliy ekvivalentlariga bag'ishlangan postlarning to'rtinchi qismi. Davom etishdan oldin buni o'qib chiqishingiz mumkin.

Ushbu maqolada biz elementlarni yaratish, qo'shish, ko'chirish va o'chirish usullarini ko'rib chiqamiz. Va jQuery allaqachon juda ko'p foydali usullarni o'z ichiga olgan bo'lsa-da, bularning barchasini mahalliy usullar yordamida osongina amalga oshirish mumkinligini bilib hayron qolasiz.

jQuery elementlarining HTML kodini boshqarish // get var html = $(elem).html(); // $(elem).html ("Yangi html"); Native JS // get var html = elem.innerHTML; // set elem.innerHTML = "Yangi html"; jQuery elementi matnini manipulyatsiya qilish // get var text = $(elem).text(); // set $(elem).text("Yangi matn"); Native JS // get var text = elem.textContent; // set elem.textContent = "Yangi matn"; jQuery elementini yaratish $(""); Native JS document.createElement("div"); Tarkibni jQuery elementlarining oxiriga qo'shadi $(parentNode).append(newNode); Native JS parentNode.appendChild(newNode); jQuery elementlarining boshiga kontent qo'shadi $(referenceNode).prepend(newNode); Native JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // yoki referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ jQuery elementidan to'g'ridan-to'g'ri $(referenceNode).before(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // yoki referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ jQuery elementidan keyin to'g'ridan-to'g'ri qo'shing $(referenceNode).after(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // yoki referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Eslatma: "beforebegin" va "afterend" faqat referans Node DOM daraxtida bo'lsa va asosiy elementga ega bo'lsa ishlaydi.

Quyidagilarga qarang:

ReferenceNode.insertAdjacentElement(pozitsiya, tugun);

insertAdjacentElement usuli ikkita parametrni oladi:

• joy - referans tuguniga nisbatan pozitsiya, quyidagilardan biri bo'lishi kerak:
  • "beforebegin" - elementning o'zidan oldin.
  • "afterbegin" - element ichida, birinchi boladan oldin.
  • "oldin" - element ichida, oxirgi boladan keyin.
  • "afterend" - elementning o'zidan keyin.
• tugun — kiritish uchun tugun

Matn tarkibi

Ba'zi matn Ba'zi matnlar var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("oldin", elem2); // natija Ba'zi matnli matn

insertAdjacentElement usuli insertBefore usuliga qaraganda toza va intuitivroq, ammo ikkinchisi eski brauzerlarda yaxshiroq qo'llab-quvvatlanadi.

Elementlarni bir necha marta qo'shish

Shuni ham ta'kidlash kerakki, DOM daraxtida joylashgan tugunga element qo'shilishi qayta chizishga olib keladi. Bu unchalik yaxshi emas, chunki brauzer yangi elementning o'lchami va o'rnini qayta hisoblashi kerak, bu ham elementning avlodlari, ajdodlari va DOMda undan keyin paydo bo'ladigan elementlarning o'zgarishiga olib keladi. Agar siz DOM-ga ko'plab elementlar qo'shsangiz, bu biroz vaqt talab qilishi mumkin.

Buning oldini olish uchun uni DocumentFragment bilan qo'shishingiz mumkin. Hujjat fragmenti faqat xotirada mavjud bo'lgan hujjat ob'ektidir, shuning uchun unga qo'shish hech qanday qayta oqimga olib kelmaydi.

Aytaylik, DOM daraxtida mavjud bo'lgan ul elementiga 100 li element qo'shishimiz kerak:

// Bizning elementlarni o'z ichiga oladigan elementni oling var ul = document.querySelector("ul"); // (var i = 1; i.) uchun 100 ta roʻyxat elementini yarating< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

Yuqoridagi misolda li elementlari to'g'ridan-to'g'ri DOM daraxtida joylashgan ul elementiga qo'shiladi, shuning uchun har bir iteratsiyada qayta chizilgan bo'ladi - bu 100 ta o'zgarish!

Keling, yaxshiroq yo'l topaylik.

// Bizning elementlarni o'z ichiga oladigan elementni oling var ul = document.querySelector("ul"); // ro'yxat elementlarini var docFrag = document.createDocumentFragment(); // (var i = 1; i.) uchun 100 ta roʻyxat elementini yarating< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

Xuddi shu misolda, li elementlari xotiradagi hujjat fragmentiga qo'shiladi, shuning uchun fragment ul elementiga qo'shilganda qayta oqim boshlanadi. Bu usul qayta chizish sonini 100 dan 1 gacha kamaytiradi.

jQuery elementini olib tashlash $(referenceNode).remove(); Native JS referenceNode.parentNode.removeChild(referenceNode); // yoki referenceNode.remove(); // FF 23.0+, 23.0+, Edge (IE qo'llab-quvvatlanmaydi)