Tipično, programeri koriste jQuery kada treba da urade nešto sa DOM-om. Međutim, gotovo svaka DOM manipulacija može se obaviti u čistom JavaScript-u koristeći njegov DOM API.

Pogledajmo ovaj API detaljnije:

Na kraju ćete napisati svoju jednostavnu DOM biblioteku koja se može koristiti u bilo kojem projektu.

DOM upiti

DOM upiti se izvode pomoću .querySelector() metode, koja uzima proizvoljan CSS selektor kao argument.

Const myElement = document.querySelector("#foo > div.bar")

Vratit će prvi odgovarajući element. Možete učiniti suprotno - provjerite da li element odgovara selektoru:

MyElement.matches("div.bar") === istina

Ako želite dobiti sve elemente koji odgovaraju selektoru, koristite sljedeću konstrukciju:

Const myElements = document.querySelectorAll(".bar")

Ako znate na koji roditeljski element želite referencirati, možete jednostavno pretraživati ​​njegove potomke umjesto da pretražujete cijeli kod:

Const myChildElemet = myElement.querySelector("input") // Umjesto: // document.querySelector("#foo > div.bar input")

Postavlja se pitanje: zašto onda koristiti druge, manje zgodne metode poput .getElementsByTagName() ? Postoji mali problem - izlaz .querySelector() nije ažuriran, a kada dodamo novi element (vidi ), neće se promijeniti.

Const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // false

Takođe querySelectorAll() prikuplja sve u jednu listu, što ga čini neefikasnim.

Kako raditi sa listama?

Povrh toga, .querySelectorAll() ima dva mala upozorenja. Ne možete samo pozvati metode za rezultate i očekivati ​​da se primjene na svaki od njih (kao što ste možda navikli da radite sa jQueryjem). U svakom slučaju, morat ćete iterirati kroz sve elemente u petlji. Drugo, vraćeni objekat je lista elemenata, a ne niz. Stoga, metode niza neće raditi. Naravno, postoje metode za liste, nešto poput .forEach() , ali, nažalost, nisu prikladne za sve slučajeve. Zato je bolje konvertirati listu u niz:

// Upotreba Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Ili prototip niza (pre-ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Jednostavnije: .forEach.call myElements , uradiSomethingWithEachElement)

Svaki element ima neka svojstva koja se odnose na "porodicu".

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Budući da je sučelje Elementa naslijeđeno od sučelja čvora, prisutna su i sljedeća svojstva:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

Prva svojstva se odnose na element, a posljednja (s izuzetkom .parentElement) mogu biti liste elemenata bilo kojeg tipa. U skladu s tim, možete provjeriti vrstu elementa:

MyElement.firstChild.nodeType === 3 // ovaj element će biti tekstualni čvor

Dodavanje klasa i atributa

Dodati nova klasa veoma jednostavno:

MyElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Dodavanje svojstva elementu je isto kao i za bilo koji objekt:

// Dobiti vrijednost atributa const value = myElement.value // Postavi atribut kao svojstvo elementa myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Možete koristiti metode .getAttibute(), .setAttribute() i .removeAttribute(). Oni će odmah promijeniti HTML atribute elementa (za razliku od DOM svojstava), što će uzrokovati ponovno prikazivanje pretraživača (možete vidjeti sve promjene ispitivanjem elementa pomoću alata za programere pretraživača). Takva precrtavanja ne samo da zahtijevaju više resursa od postavljanja DOM svojstava, već mogu dovesti i do neočekivanih grešaka.

Obično se koriste za elemente koji nemaju odgovarajuća DOM svojstva, kao što je colspan . Ili ako je njihova upotreba zaista neophodna, na primjer za HTML svojstva prilikom nasljeđivanja (vidi).

Dodavanje CSS stilova

Dodaju se na isti način kao i ostala svojstva:

MyElement.style.marginLeft = "2em"

Neka specifična svojstva se mogu postaviti pomoću .style, ali ako želite da dobijete vrijednosti nakon nekih proračuna, onda je bolje koristiti window.getComputedStyle() . Ova metoda prima element i vraća CSSStyleDeclaration koji sadrži stilove i samog elementa i njegovog roditelja:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

Promjena DOM-a

Možete pomicati elemente:

// Dodaj element1 kao posljednje dijete elementa2 element1.appendChild(element2) // Umetanje element2 kao dijete elementa1 prije elementa3 element1.insertBefore(element2, element3)

Ako ga ne želite premjestiti, ali trebate umetnuti kopiju, koristite:

// Kreiraj klon const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

Metoda .cloneNode() uzima logičku vrijednost kao argument, a ako je istina, podređeni elementi se također kloniraju.

Naravno, možete kreirati nove elemente:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("neki tekst")

Zatim ih umetnite kao što je prikazano iznad. Ne možete direktno izbrisati element, ali to možete učiniti preko nadređenog elementa:

MyParentElement.removeChild(myElement)

Indirektno možete kontaktirati i:

MyElement.parentNode.removeChild(myElement)

Metode za elemente

Svaki element ima svojstva kao što su .innerHTML i .textContent, oni sadrže HTML kod i, shodno tome, sam tekst. Sljedeći primjer mijenja sadržaj elementa:

// Promijenite HTML myElement.innerHTML = ` Novi sadržaj ( el.addEventListener("change", function (event) ( console.log(event.target.value) ))))

Sprečavanje zadanih radnji

Da biste to učinili, koristite metodu .preventDefault() koja blokira standardne radnje. Na primjer, blokirat će podnošenje obrasca ako autorizacija na strani klijenta nije bila uspješna:

MyForm.addEventListener("submit", funkcija (događaj) ( const name = this.querySelector("#name") if (name.value === "Donald Duck)") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Metoda .stopPropagation() će pomoći ako imate određeni rukovalac događaja dodijeljen podređenom elementu i drugi rukovalac događaja dodijeljen roditelju za isti događaj.

Kao što je ranije rečeno, metoda .addEventListener() uzima opcioni treći argument u obliku konfiguracijskog objekta. Ovaj objekt mora sadržavati bilo koje od sljedećih logičkih svojstava (sve su po defaultu postavljene na false):

• capture: događaj će biti pridružen ovom elementu prije bilo kojeg drugog elementa ispod u DOM-u;
• jednom: događaj se može dodijeliti samo jednom;
• pasivno: event.preventDefault() će biti zanemareno (izuzetak tokom greške).

Najčešće svojstvo je .capture , i toliko je uobičajeno da postoji prečica za njega: umjesto da ga proslijedite u konfiguracijski objekt, samo prenesite njegovu vrijednost ovdje:

MyElement.addEventListener(tip, slušalac, istina)

Rukovaoci se uklanjaju pomoću metode .removeEventListener() koja uzima dva argumenta: tip događaja i referencu na rukovalac koji treba ukloniti. Na primjer, svojstvo jednom se može implementirati ovako:

MyElement.addEventListener("promjena", slušatelj funkcije (događaj) ( console.log(event.type + " se pokrenuo na " + ovo) this.removeEventListener("promjena", slušalac) ))

Nasljedstvo

Recimo da imate element i želite da dodate rukovalac događaja za svu njegovu decu. Tada biste morali da ih prođete kroz petlju koristeći myForm.querySelectorAll("input") metodu kao što je prikazano iznad. Međutim, možete jednostavno dodati elemente u obrazac i provjeriti njihov sadržaj koristeći event.target.

MyForm.addEventListener("promjena", funkcija (događaj) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

Još jedna prednost ove metode je da će rukovalac biti automatski vezan za nove podređene elemente.

Animacija

Najlakši način za dodavanje animacije je korištenje CSS-a sa svojstvom prijelaza. Ali za veću fleksibilnost (na primjer, za igre), JavaScript je prikladniji.

Pozivanje metode window.setTimeout() dok se animacija ne završi nije dobra ideja, jer se vaša aplikacija može zamrznuti, posebno na mobilnih uređaja. Bolje je koristiti window.requestAnimationFrame() da sačuvate sve promjene do sljedećeg ponovnog crtanja. Uzima funkciju kao argument, koja zauzvrat prima vremensku oznaku:

Const start = window.performance.now() const trajanje = 2000 window.requestAnimationFrame(funkcija fadeIn (sada)) ( const progress = sada - start myElement.style.opacity = napredak / trajanje if (progress< duration) { window.requestAnimationFrame(fadeIn) } }

Na ovaj način se postiže vrlo glatka animacija. U svom članku, Mark Brown raspravlja o ovoj temi.

Pisanje sopstvene biblioteke

Činjenica da u DOM-u morate stalno ponavljati elemente da biste izvršili bilo kakve operacije nad elementima može izgledati prilično zamorno u poređenju sa jQuery-jevom $(.foo").css((color: "red")) sintaksom. Ali zašto ne biste napisali nekoliko vlastitih metoda kako biste olakšali ovaj zadatak?

Const $ = funkcija $ (selektor, kontekst = dokument) ( const elementi = Array.from(context.querySelectorAll(selector)) return ( elementi, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) vrati ovo ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) vrati ovo ), na (događaj, rukovalac, opcije) ( this.elements .forEach(element => (element.addEventListener(događaj, rukovalac, opcije) )) vrati ovo ) ) )

Pseudocode

$(".rightArrow").click(function() (rightArrowParents = this.dom(); //.dom(); je pseudo funkcija ... trebala bi prikazati cijelo upozorenje(rightArrowParents); ));

Alarmna poruka će biti:

tijelo div.lol a.rightArrow

Kako mogu dobiti ovo koristeći javascript/jquery?

Korišćenjem jQueryja na ovaj način (slijedi rješenje koje ne koristi jQuery osim za događaj, puno manje poziva funkcija ako je to važno):

Primjer u realnom vremenu:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() (var entry = this.tagName .toLowerCase(); if (this.className) ( unos += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); alert(rightArrowParents.join (" ")); vrati false; )); Kliknite ovdje

(U živim primjerima, ažurirao sam atribut class na div da bude lol multi kako bih pokazao rukovanje više klasa.)

Evo rješenja za precizno podudaranje elemenata.

Važno je shvatiti da je selektor (nije stvaran) koje Chrome alati pokazuju ne identifikuju jedinstveno element u DOM-u. ( na primjer, neće praviti razliku između liste uzastopnih elemenata raspona. Nema informacija o pozicioniranju/indeksiranju)

$.fn.fullSelector = funkcija () ( var path = this.parents().addBack(); var quickCss = path.get().map(funkcija (stavka) (var self = $(stavka), id = stavka .id ? "#" + item.id: "", clss = item.classList.length ? item.classList.toString().split(" ").map(funkcija (c) (vratiti "." + c; )).join("") : "", ime = item.nodeName.toLowerCase(), index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; if (name === "html" || name === "body") ( povratno ime; ) povratno ime + indeks + id + clss; )).join(" > ") vrati quickCss; );

A možete ga koristiti ovako:

Console.log($("neki-selektor").fullSelector());

Premjestio sam komad od T.J. Od gužve do male jQuery dodatak. Koristio sam jQuery verziju, čak i ako je u pravu da je potpuno nepotrebno, ali ja je koristim samo u svrhu otklanjanja grešaka, tako da me nije briga.

Upotreba:

Ugniježđeni raspon Jednostavan raspon Pre

// rezultat (niz): ["body", "div.sampleClass"] $("span").getDomPath(false) // rezultat (niz): body > div.sampleClass $("span").getDomPath( ) // rezultat (niz): ["body", "div#test"] $("pre").getDomPath(false) // rezultat (niz): body > div#test $("pre").getDomPath ()

Var obj = $("#show-editor-button"), path = ""; while (typeof obj.prop("tagName") != "undefined")( if (obj.attr("class"))( path = "."+obj.attr("class").replace(/\s /g , ".") + path; ) if (obj.attr("id"))( path = "#"+obj.attr("id") + path; ) path = " " +obj.prop( "tagName").toLowerCase() + put; obj = obj.parent(); ) console.log(path);

zdravo, ova funkcija rješava grešku vezanu za trenutni element koji nije prikazan na putanji

Provjerite sada

$j(".wrapper").click(function(event) ( selectedElement=$j(event.target); var rightArrowParents = ; $j(event.target).parents().not("html,body") .each(function() ( var entry = this.tagName.toLowerCase(); if (this.className) ( unos += "." + this.className.replace(/ /g, "."); )else if (this.id)( entry += "#" + this.id; ) entry=replaceAll(entry,.","."); rightArrowParents.push(entry); )); rightArrowParents.reverse(); // if(event.target.nodeName.toLowerCase()=="a" || event.target.nodeName.toLowerCase()=="h1")( var entry = event.target.nodeName.toLowerCase(); if (događaj .target.className) ( unos += "." + event.target.className.replace(/ /g, "."); )else if(event.target.id)( unos += "#" + događaj. target.id; ) rightArrowParents.push(entry); // )

Gdje je $j = jQuery varijabla

također riješiti problem sa .. u nazivu klase

evo funkcije zamjene:

Funkcija escapeRegExp(str) (vraća str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) funkcija replaceAll(str, pronađi, zamijeni) (vrati str.replace(new RegExp(escapeRegExp(pronađi), "g"), zamijeni); )

Evo izvorne JS verzije koja vraća jQuery putanju. Također dodajem ID-ove za elemente ako postoje. Ovo će vam dati opciju da krenete najkraćim putem ako vidite id u nizu.

Var path = getDomPath(element); console.log(path.join(" > "));

Body > section:eq(0) > div:eq(3) > section#content > section#firehose > div#firehoselist > article#firehose-46813651 > header > h2 > span#title-46813651

Evo funkcije.

Funkcija getDomPath(el) ( var stack = ; while (el.parentNode != null) ( console.log(el.nodeName); var sibCount = 0; var sibIndex = 0; for (var i = 0; i< el.parentNode.childNodes.length; i++) { var sib = el.parentNode.childNodes[i]; if (sib.nodeName == el.nodeName) { if (sib === el) { sibIndex = sibCount; } sibCount++; } } if (el.hasAttribute("id") && el.id != "") { stack.unshift(el.nodeName.toLowerCase() + "#" + el.id); } else if (sibCount >1) ( stack.unshift(el.nodeName.toLowerCase() + ":eq(" + sibIndex + ")"); ) else ( stack.unshift(el.nodeName.toLowerCase()); ) el = el.parentNode ; ) vrati stack.slice(1); // uklanja html element)

Kompleksne i teške web aplikacije postale su uobičajene ovih dana. Biblioteke za više pretraživača i jednostavne za korištenje poput jQueryja sa svojom bogatom funkcionalnošću mogu uvelike pomoći u manipuliranju DOM-om u hodu. Stoga nije iznenađujuće da mnogi programeri češće koriste takve biblioteke nego rade s izvornim DOM API-jem, s kojim je bilo mnogo problema. Iako su razlike u pretraživačima i dalje problem, DOM je sada u boljem stanju nego što je bio prije 5-6 godina kada je jQuery postajao sve popularniji.

U ovom članku ću demonstrirati mogućnosti manipulacije HTML-om DOM-a, fokusirajući se na roditeljske, dječje i susjedske odnose. U zaključku ću dati informacije o podršci pretraživača za ove funkcije, ali imajte na umu da je biblioteka kao što je jQuery i dalje dobra opcija zbog prisustva grešaka i nedosljednosti u implementaciji izvorne funkcionalnosti.

Brojanje podređenih čvorova

Za demonstraciju ću koristiti sljedeće HTML markup, promijenit ćemo ga nekoliko puta u cijelom članku:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer peti
• Primjer šesti

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Kao što vidite, rezultati su isti, iako se koriste različite tehnike. U prvom slučaju koristim vlasništvo djece. Ovo je svojstvo samo za čitanje, vraća kolekciju HTML elementi, koji se nalazi unutar traženog elementa; Da prebrojim njihov broj, koristim svojstvo dužine ove kolekcije.

U drugom primjeru, koristim metodu childElementCount, za koju mislim da je uredniji i potencijalno lakši način za održavanje (razgovarajte o tome kasnije, mislim da nećete imati problema da shvatite šta radi).

Mogao bih pokušati koristiti childNodes.length (umjesto children.length), ali pogledajte rezultat:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

Vraća 13 jer je childNodes kolekcija svih čvorova, uključujući razmake - imajte to na umu ako vam je stalo do razlike između čvorova djece i čvorova podređenih elemenata.

Provjera postojanja podređenih čvorova

Da provjerim da li element ima podređene čvorove, mogu koristiti metodu hasChildNodes(). Metoda vraća Booleovu vrijednost koja ukazuje na njihovo prisustvo ili odsustvo:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // istinito

Znam da moja lista ima podređene čvorove, ali mogu promijeniti HTML tako da ih nema; Oznaka sada izgleda ovako:

A evo rezultata ponovnog pokretanja hasChildNodes():

Console.log(myList.hasChildNodes()); // istinito

Metoda i dalje vraća true. Iako lista ne sadrži elemente, ona sadrži razmak, koji je važeći tip čvora. Ova metoda uzima u obzir sve čvorove, a ne samo čvorove elemenata. Da bi hasChildNodes() vratio false, moramo ponovo promijeniti oznaku:

I sada se očekivani rezultat prikazuje u konzoli:

Console.log(myList.hasChildNodes()); // false

Naravno, ako znam da bih mogao naići na razmak, prvo ću provjeriti postojanje podređenih čvorova, a zatim ću koristiti svojstvo nodeType da utvrdim da li među njima ima čvorova elementa.

Dodavanje i uklanjanje podređenih elemenata

Postoje tehnike koje možete koristiti za dodavanje i uklanjanje elemenata iz DOM-a. Najpoznatiji od njih zasniva se na kombinaciji metoda createElement() i appendChild().

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

U ovom slučaju kreiram koristeći metodu createElement() i zatim ga dodajem u tijelo. Vrlo je jednostavno i vjerovatno ste već koristili ovu tehniku.

Ali umjesto konkretnog umetanja element koji se kreira, također mogu koristiti appendChild() i samo premjestiti postojeći element. Recimo da imamo sljedeće oznake:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer peti
• Primjer šesti

Primjer teksta

Mogu promijeniti lokaciju liste sa sljedećim kodom:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);

Konačni DOM će izgledati ovako:

Primjer teksta

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer peti
• Primjer šesti

Primijetite da je cijela lista uklonjena sa svog mjesta (iznad pasusa), a zatim umetnuta nakon nje prije završnog tijela. Dok se metoda appendChild() obično koristi za dodavanje elemenata kreiranih pomoću createElement() , može se koristiti i za premještanje postojećih elemenata.

Također mogu potpuno ukloniti podređeni element iz DOM-a koristeći removeChild() . Evo kako izbrisati našu listu iz prethodnog primjera:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Element je sada uklonjen. Metoda removeChild() vraća uklonjeni element tako da ga mogu sačuvati u slučaju da mi zatreba kasnije.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

Postoji i ChildNode.remove() metoda koja je relativno nedavno dodata u specifikaciju:

Var myList = document.getElementById("myList"); myList.remove();

Ova metoda ne vraća udaljeni objekt i ne radi u IE (samo Edge). I obje metode uklanjaju tekstualne čvorove na isti način kao i čvorove elemenata.

Zamjena podređenih elemenata

Mogu zamijeniti postojeći podređeni element novim, bez obzira da li taj novi element postoji ili sam ga kreirao od nule. Evo oznake:

Primjer teksta

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "primjer"; myDiv.appendChild(document.createTextNode("Tekst novog elementa")); document.body.replaceChild(myDiv, myPar);

Tekst novog elementa

Kao što vidite, metoda replaceChild() uzima dva argumenta: novi element i stari element koji zamjenjuje.

Također mogu koristiti ovu metodu za premještanje postojećeg elementa. Pogledajte sljedeći HTML:

Primjer teksta 1

Primjer teksta 2

Primjer teksta 3

Mogu zamijeniti treći paragraf prvim paragrafom koristeći sljedeći kod:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Sada generirani DOM izgleda ovako:

Primjer teksta 2

Primjer teksta 1

Odabir određene djece

Ima ih nekoliko Različiti putevi odabirom određenog elementa. Kao što je ranije prikazano, mogu početi korištenjem djece kolekcije ili svojstva childNodes. Ali pogledajmo druge opcije:

Svojstva firstElementChild i lastElementChild rade upravo ono što njihova imena sugeriraju da rade: odabiru prvi i posljednji podređeni element. Vratimo se na naše oznake:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer peti
• Primjer šesti

Mogu odabrati prvi i posljednji element koristeći ova svojstva:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Primjer jedan" console.log(myList.lastElementChild.innerHTML); // "Primjer šest"

Također mogu koristiti svojstva previousElementSibling i nextElementSibling ako želim odabrati podređene elemente osim prvog ili posljednjeg. Ovo se radi kombinovanjem svojstava firstElementChild i lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Primjer dva" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Primjer pet"

Postoje i slična svojstva firstChild, lastChild, previousSibling i nextSibling, ali uzimaju u obzir sve vrste čvorova, a ne samo elemente. Općenito, svojstva koja uzimaju u obzir samo čvorove elemenata korisnija su od onih koja odabiru sve čvorove.

Umetanje sadržaja u DOM

Već sam pogledao načine za umetanje elemenata u DOM. Idemo dalje slična tema i pogledajte nove opcije za umetanje sadržaja.

Prvo, postoji jednostavna metoda insertBefore(), slično kao replaceChild(), ona uzima dva argumenta i radi i sa novim elementima i sa postojećim. Evo oznake:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer peti
• Primjer šesti

Primjer paragrafa

Obratite pažnju na pasus koji ću prvo ukloniti, a zatim ga umetnuti ispred liste, sve u jednom potezu:

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

U rezultirajućem HTML-u, paragraf će se pojaviti ispred liste i ovo je još jedan način da se premota element.

Primjer paragrafa

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer peti
• Primjer šesti

Kao i replaceChild(), insertBefore() uzima dva argumenta: element koji treba dodati i element ispred kojeg želimo da ga ubacimo.

Ova metoda je jednostavna. Pokušajmo sada sa snažnijom metodom umetanja: metodom insertAdjacentHTML().