Veb-sahifa elementlarini yaratish, qo'shish va o'zgartirish.

Golovna

Kimning yozuvidan JavaScript ob'ektiga elementni qanday qo'shish yoki o'chirishni bilmoqchiman.

Dumba uchun yig'iladigan ob'ekt

var obj = (ism: "alex", familiya_ism: "petrov", veb-sayt: "sayt", );

Ma'lumotlar mutlaqo be-yak bo'lishi mumkin, lekin ro'yxatga olish usulisiz hidi shunday bo'ladi.

Yangi element qo'shish

// ob'ektga "ru" qiymatlari bilan yangi "mamlakat" kalitini qo'shing obj [" city " ] = "Moskva" ;

// yangi kalit qo'shing, faqat "shahar" va "Moskva" qiymatlari

Kod endi hamma narsani aniqroq qiladi, lekin uni yanada aniqroq qilish uchun: "." yordamida ob'ekt sintaksisidan foydalanib, ob'ektga yangi qiymatlarni qo'shishingiz mumkin.

í kalit yoki massivning asosiy formati.

Ob'ektning o'rtasida ob'ekt yarating

obj.other_obj = ();

// obj da other_obj ning yangi qiymatini yarating va uni ob'ekti bilan yarating

Endi men u erga ba'zi ma'lumotlarni qo'shaman:

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

• obj.other_obj.second = "boshqa"; Biz other_obj o'rtasida ikkita yangi qiymat yaratdik, birinchi va ikkinchi.
• Element turi deleteobj.name;

// aylantirish: rost

Ob'ektlardan elementlarni olib tashlash uchun tezda o'chirishdan foydalanishingiz mumkin.

Var el = document.createElement("div");

var elText = document.createTextNode("Salom Dunyo");

Misoldan ko'rinib turibdiki, elementni o'zgartirish yangi div elementi uchun harakatni tejaydi.

• Biroq, siz tushunganingizdek, yaratilgan elementlar etarli emas, hatto ularni veb-sahifaga qo'shish kerak bo'lmasa ham. Agar shu tarzda badbo'y hid elementlari har qanday virtual makonda yoki xotirada mavjud bo'lsa ham va ularni veb-sahifada ko'rsatish uchun maxsus usullar ishlab chiqilishi kerak.
• Veb-saytga elementlar qo'shish uchun quyidagi usullardan foydalaniladi: appendChild(newNode)

: ushbu usulga ega bo'lgan elementning oxiriga yangi element qo'shadi

maqola sarlavhasi

Birinchi xatboshi

Yana bir paragraf

Dumba h3 sarlavhasining birinchi elementini va vuzol matnini yaratdi.

Keyin vuzol matniga sarlavha elementi qo'shiladi.

Ushbu sarlavha sahifada ko'rsatilishi uchun veb-sahifa elementlaridan biriga qo'shilgan.

Qo'shimcha matn maydoniga ega bo'lgan elementning o'rtasida matn yaratish mutlaqo shart emas, buning uchun textContent kuchi to'g'ridan-to'g'ri matnni elementga belgilash imkonini beradi.

Var el = document.createElement("h3");

el.textContent = "Salom, men nomman";

Var artDiv = document.querySelector("div.article");

// klon elementi articleDiv var newArtDiv = artDiv.cloneNode(true); // asosiy elementning oxirigacha uzaytirish document.body.appendChild(newArtDiv); cloneNode() usuli parametrni o'tkazishni talab qiladi ko'proq mantiqiy ma'no Agar siz rost deb o'tsangiz, element barcha tugunlar bilan bir vaqtda nusxalanadi;

í kalit yoki massivning asosiy formati.

Agar siz noto'g'ri o'tsangiz, siz tugunlarsiz nusxa ko'chira olmaysiz.

IN

ushbu ilova

Biz elementni birgalikda nusxalaymiz va uni veb-sahifaning oxiriga qo'shamiz.

Elementni olib tashlash uchun siz removeChild() usulini chaqirishingiz kerak.

Bu usul bola tugunlaridan birini tanlashdir:

Var artDiv = document.querySelector("div.article");

// biz vuzolni bilamiz, bu birinchi xatboshi var removNode = document.querySelectorAll("div.article p");

// maktabni olib tashlang artDiv.removeChild(removNode);

Kimning misolida div blokidagi birinchi xatboshi mavjud Elementni almashtirish

Bir elementni boshqasiga almashtirish uchun replaceChild(newNode, oldNode) usulidan foydalaning. Bu usul yangi elementni bitta parametr sifatida qabul qiladi, eski elementni boshqa parametr sifatida almashtiradi.

Var artDiv = document.querySelector("div.article");

• // biz almashtiriladigan tilni bilamiz - birinchi xatboshi var old = document.querySelectorAll("div.article p");// element yaratish var new = document.createElement("h3");
• // matningizni yarating var elemtxt = document.createTextNode("Salom Dunyo");// elementga matnni asosiy element sifatida qo'shish new.appendChild(elemtxt);
• // Eski maktabni yangisi bilan almashtiring artDiv.replaceChild(yangi, eski); Bunday holda, biz birinchi xatboshini almashtiramiz, ehtiyotkorlik bilan h2 sarlavhasini yaratamiz.
• SUMTALAR. Element yaratish uchun quyidagi usullardan foydalaning:
• document.createElement(teg)- Men yangi element yarataman. document.createTextNode(matn)- vuzol matnini yaratish

Tugunlarni kiritish va tanlash usullari

parent.appendChild(el)

— birinchi elementning oxiriga element qo‘shadi

parent.insertBefore(el, nextSibling)

- Elementni asosiy elementdan oldin kiritadi

var newElement = document.createElement("div");

Croc 2. Xabar qo'shing: elementParent.insertBefore(newElement, element.nextSibling); JavaScript elementni kiritishim uchun insertBefore() funktsiyasini bajarishi mumkin keyin boshqa elementsiz

jQuery wiki

Yana qanday kutubxonalar?

To'g'ridan-to'g'ri JavaScript keladi:

Qo'shish:

Element.parentNode.insertBefore(newElement, element);

Keyin qo'shing:

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

Ale, soddalik uchun u erga bir nechta prototiplarni qo'ying.

Bunday prototiplarni yaratgandan so'ng, siz ushbu funktsiyani to'g'ridan-to'g'ri yangi yaratilgan elementlardan olishingiz mumkin.

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;

/* Yangi yetim element ob'ektini odatiy yaratish va sozlash */ var NewElement = document.createElement("div");

• NewElement.innerHTML = "Yangi element";
• NewElement.id = "NewElement";
• /* Vikorystyuchi YUQARIDAN OLDIN -YOKI- KEYIN NewElementni qo'shish Yuqorida aytib o'tilgan prototiplar */ NewElement.appendAfter(document.getElementById("Neighbor2"));
• div (matnni tekislash: markaz; ) #Mahalla (rang: jigarrang; ) #NewElement (rang: yashil; )
• Qo'shni 1

Qo'shni 2

Qo'shni 3

Ideal holda, insertAfter MDN ga o'xshash ishlashi kerak.

Quyidagi kodda quyidagi kodlar paydo bo'ladi:

Amaldagi kod

// 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.style.color = "#FF0000";

newNode = document.createElement("li");

• newNode.style.color = "#FF0000";
• newNode.innerText = "Ikkinchi yangi element";

newNode.style.color = "#FF0000";

document.getElementById("no-reference-tugun").insertAfter(newNode);

referenceNode = document.getElementById("no-singling-after");

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);

Bu kod, kichik CSS fayli qatoriga qo'yilgan boladan so'ng darhol yuborish 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. Keyingisi ););

//qo'yishdan oldin tekshiring try ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb);

else window.addEventListener("load",cb); Men bu dietada allaqachon juda ko'p dalillar borligini bilaman, lekin ularning hech biri mening aniq natijalarim emas edi. Menga xuddi parentNode.insertBefore xatti-harakatiga sabab bo'ladigan funksiya kerak- keyin siz null referenceNode (tasdiqlashda qabul qilinmaydi) va qo'shishdan oldin insertni qabul qilishingiz kerak. oxiri insert Bundan oldin kiritish sizning zimmangizda

boshoq

, shuning uchun boshqa stsenariyda ushbu funktsiya bilan chiqish joyiga kiritish mumkin bo'lmaydi;

Xuddi shu sababga ko'ra, oxirida insertBefore qo'shiladi.

Nolinchi referenceNode fragmentlari shunday saqlanadiki, siz otadan oldin insert qilishingiz mumkin, biz otaning insertBefore usuli parentNode ni bilishimiz kerak, shuning uchun biz otaning parentNode-ga shu tarzda kirishimiz mumkin;

Bizning funktsiyamiz mavjud emasligi sababli, biz Ota elementini parametr sifatida o'tkazishimiz kerak. ,

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);

* document.createElement(param) - bu usul bevosita element yaratish uchun xizmat qiladi.

Parametr kontekstida yaratilgan element nomini oladi Sozlamani yaratilgan elementga aylantiradi.

document.createElement('div');

// div elementini yarating.

* document.appendChild(param) – bu usul HTML kodiga element qo‘shish uchun xizmat qiladi.

Parametr sifatida element yaratishga yuboriladi; var parent = document.getElementsByTagName("BODY");//tananing elementiga kuchni olib tashlash

var elem = document.createElement('div');// div elementini yarating

parent.appendChild(elem);// elementni qo'shadi, bu erda bizning elementimiz qo'shilgan joyda ota-ona qo'shiladi.

bu yigitga

- butun tana;

* document.createTextNode() - matnni elementning o'rtasiga joylashtirish uchun foydalaniladigan usul.

Elementning dumbasi.

createElem() funktsiyasi (

Var newP = document.createElement("p");

NewP.className = "elemClass";

NewP.id = "myPId";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "#c5c5c5";

NewP.style.color = "#000";

Var text = "qo'shish uchun matn";

Var textNode = document.createTextNode(matn);

NewP.appendChild(textNode);

Parent.appendChild(newP);

CreateElem funktsiyasi ota-onani yangi element joylashtiriladigan elementga (tana) o'zgartiradi.

Keyin yangi P elementi yaratiladi, id, sinf, uslub atributlari qo'shiladi va bu atributlarning qiymatlari ham ko'rsatiladi.

Keyin yangi elementimizga qo'shilgan matn maydoni yaratiladi.

Shundan so'ng, elementning o'zi tanaga qo'shilishi kerak.

Ko'p sonli yangi elementlarni olish uchun siz qattiq ishlashingiz kerak bo'ladi, chunki ...

Keyin ularni veb-saytning turli joylariga joylashtirish kerak bo'lishi mumkin.

boshqa elementlarga qo'shing.

Qo'shimcha universal funktsiya uchun harakat elementining dumbasi.

Bu funksiya yangi element yaratishga, unga turli atributlar qo‘shishga, yangi matn elementini qo‘shishga, uni belgilangan elementdan oldin yoki keyin joylashtirishga yoki elementni yangi yaratilgan element bilan almashtirishga yordam beradi.

Shubhasiz, yagona dalil ism.

CreateElement funktsiyasi (nom, attrs, uslub, matn, o'tgan_id, joy, o'zgartirilgan) (

Var parent = document.getElementsByTagName("BODY");

Var e = document.createElement(nom);

Agar (attrs) (

Uchun (attrlarda kalit) (

Agar (kalit == "sinf") (

E.className = attrs;

Var old_elem = document.getElementById(past_id);

Agar(pozitsiya=="oldin")(

Parent.insertBefore(e,old_elem)

)else if(pozitsiya=="keyin")(

InsertAfter(ota-ona,e,eski_element);

Agar(o'zgartirildi!="" && o'zgartirildi==true)(

Parent.removeChild(eski_elem);

Parametrlar:

Ism - element nomi;

Attrs - yaratilgan elementning atributlari;

Uslub - buklangan elementning uslublari;

Matn - kiritilishi kerak bo'lgan matn;

Past_id - elementning identifikatori, bizning elementimiz qaerga joylashtirilishini ko'rsatadi;

Lavozim - oldin, keyin ikkita qiymatni qabul qilishingiz mumkin;

O'zgartirilgan - ikkita qiymatni qabul qiladigan praporshchik: rost yoki noto'g'ri. Agar bu parametr rostga o'rnatilgan bo'lsa, u holda eski element yangisi bilan almashtiriladi;

Qopqoq kabi, biz DIV elementini atributlar bilan yaratamiz va eski elementni yangilari bilan almashtiramiz.

createElement("div",

("sinf": "myDivCSSClass", "id": "myDivId", "align": "center"),

("kenglik": "200px", "balandlik": "250px", "fon": "#3B9D00", "rang": "#fff"),

"Mana mening matnim",

"Sinov"

"oldin"

Men JavaScript-ni yozish imkoniyatiga ega bo'ldim va JavaScript-da skriptda biror narsa yozishga imkonim bor edi:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Spravjiy baliq balig'i."));
var div = document.createElement("div");
div.setAttribute("id", "yangi");
div.appendChild(p);

Tse sizni korisno buti mumkin.

Muammo: agar siz bir nechta elementlarni yaratsangiz, bittasini bittasiga joylashtirsangiz, kod yanada murakkablashadi.

Men asosiy vazifa uchun oddiy vositani - create() funktsiyasini taqdim etaman (quyida ko'chirma).
Masalan, biz matnning paragrafini yaratamiz:

var el = create("p", (), "Alvido, sevgi!");
Yoki paragraf va o'rtada xabar bo'lgan 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 eksa, diqqat bilan jadval:
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: "maxsus2"), "hamma joyda")

3. ilovadagi jadval = va tr = undan keyingi ishlash uchun biriktirilgan ob'ektlarni yaratishni saqlashga imkon beradi.