Običajno razvijalci uporabljajo jQuery, ko morajo nekaj narediti z DOM. Vendar pa je skoraj vsako manipulacijo DOM mogoče izvesti v čistem JavaScriptu z uporabo njegovega API-ja DOM.

Oglejmo si ta API podrobneje:

Na koncu boste napisali svojo preprosto knjižnico DOM, ki jo lahko uporabite v katerem koli projektu.

poizvedbe DOM

Poizvedbe DOM se izvajajo z uporabo metode .querySelector(), ki kot argument vzame poljuben izbirnik CSS.

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

Vrnil bo prvi ujemajoči se element. Lahko storite nasprotno - preverite, ali se element ujema z izbirnikom:

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

Če želite pridobiti vse elemente, ki se ujemajo z izbirnikom, uporabite naslednji konstrukt:

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

Če veste, na kateri nadrejeni element se želite sklicevati, lahko preprosto iščete po njegovih podrejenih elementih, namesto da iščete po celotni kodi:

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

Postavlja se vprašanje: zakaj potem uporabljati druge, manj priročne metode, kot je .getElementsByTagName()? Obstaja majhna težava - izhod .querySelector() ni posodobljen in ko dodamo nov element (glejte ), se ne bo spremenil.

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

Tudi querySelectorAll() zbere vse na en seznam, zaradi česar ni zelo učinkovit.

Kako delati s seznami?

Poleg tega ima .querySelectorAll() dve majhni opozorili. Ne morete samo poklicati metod za rezultate in pričakovati, da bodo uporabljene za vsakega posebej (kot ste morda vajeni početi z jQuery). V vsakem primeru boste morali ponoviti vse elemente v zanki. Drugič, vrnjeni objekt je seznam elementov in ne matrika. Zato matrične metode ne bodo delovale. Seveda obstajajo metode za sezname, nekaj takega kot .forEach() , vendar, žal, niso primerne za vse primere. Zato je bolje, da seznam pretvorite v matriko:

// Uporaba Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Ali prototip polja (pred ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Enostavneje: .forEach.call( myElements, doSomethingWithEachElement)

Vsak element ima nekatere lastnosti, ki se nanašajo na "družino".

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

Ker je vmesnik Element podedovan od vmesnika Node, so prisotne tudi naslednje lastnosti:

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

Prve lastnosti se nanašajo na element, zadnje (z izjemo .parentElement) pa so lahko seznami elementov katere koli vrste. V skladu s tem lahko preverite vrsto elementa:

MyElement.firstChild.nodeType === 3 // ta element bo besedilno vozlišče

Dodajanje razredov in atributov

Dodaj nov razred zelo preprosto:

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

Dodajanje lastnosti elementu je enako kot za kateri koli predmet:

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

Uporabite lahko metode .getAttibute(), .setAttribute() in .removeAttribute(). Takoj bodo spremenili atribute HTML elementa (v nasprotju z lastnostmi DOM), kar bo povzročilo ponovno upodabljanje brskalnika (vse spremembe si lahko ogledate tako, da pregledate element z orodji za razvijalce brskalnika). Takšna ponovna risanja ne zahtevajo le več virov kot nastavitev lastnosti DOM, ampak lahko povzročijo tudi nepričakovane napake.

Običajno se uporabljajo za elemente, ki nimajo ustreznih lastnosti DOM, kot je colspan. Ali če je njihova uporaba res potrebna, na primer za lastnosti HTML pri dedovanju (glej).

Dodajanje slogov CSS

Dodajajo se na enak način kot druge lastnosti:

MyElement.style.marginLeft = "2em"

Nekatere specifične lastnosti je mogoče nastaviti z uporabo .style, če pa želite vrednosti pridobiti po nekaj izračunih, je bolje uporabiti window.getComputedStyle(). Ta metoda prejme element in vrne CSSStyleDeclaration, ki vsebuje sloge samega elementa in njegovega nadrejenega elementa:

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

Spreminjanje DOM

Elemente lahko premikate:

// Dodajanje elementa1 kot zadnjega podrejenega elementa2 element1.appendChild(element2) // Vstavi element2 kot podrejenega elementa1 pred element3 element1.insertBefore(element2, element3)

Če ga ne želite premakniti, vendar morate vstaviti kopijo, uporabite:

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

Metoda .cloneNode() sprejme logično vrednost kot argument, in če je res, se klonirajo tudi podrejeni elementi.

Seveda lahko ustvarite nove elemente:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("nekaj besedila")

Nato jih vstavite, kot je prikazano zgoraj. Elementa ne morete izbrisati neposredno, lahko pa to storite prek nadrejenega elementa:

MyParentElement.removeChild(myElement)

Kontaktirate lahko tudi posredno:

MyElement.parentNode.removeChild(myElement)

Metode za elemente

Vsak element ima lastnosti, kot sta .innerHTML in .textContent, vsebujejo kodo HTML in s tem tudi samo besedilo. Naslednji primer spremeni vsebino elementa:

// Spremenite HTML myElement.innerHTML = ` Nova vsebina ( el.addEventListener("sprememba", funkcija (dogodek) ( console.log(event.target.value) )) ))

Preprečevanje privzetih dejanj

Če želite to narediti, uporabite metodo .preventDefault(), ki blokira standardna dejanja. Na primer, blokiral bo oddajo obrazca, če avtorizacija na strani odjemalca ni bila uspešna:

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

Metoda .stopPropagation() vam bo pomagala, če imate podrejenemu elementu dodeljen poseben obravnavalec dogodkov in nadrejenemu elementu za isti dogodek dodeljen drugi obravnavalec dogodkov.

Kot je navedeno prej, metoda .addEventListener() sprejme izbirni tretji argument v obliki konfiguracijskega objekta. Ta objekt mora vsebovati katero koli od naslednjih logičnih lastnosti (vse so privzeto nastavljene na false):

• zajemanje: dogodek bo pripet temu elementu pred katerim koli drugim spodnjim elementom v DOM;
• enkrat: dogodek se lahko dodeli samo enkrat;
• pasivno: event.preventDefault() bo prezrt (izjema med napako).

Najpogostejša lastnost je .capture in je tako pogosta, da obstaja bližnjica zanjo: namesto da jo posredujete v konfiguracijskem objektu, samo posredujte njeno vrednost sem:

MyElement.addEventListener(vrsta, poslušalec, res)

Obravnavalniki se odstranijo z metodo .removeEventListener(), ki sprejme dva argumenta: vrsto dogodka in sklic na obravnavo, ki ga želite odstraniti. Na primer, lastnost once je mogoče implementirati takole:

MyElement.addEventListener("sprememba", poslušalec funkcije (dogodek) ( console.log(event.type + " se je sprožil na " + this) this.removeEventListener("sprememba", poslušalec) ))

Dedovanje

Recimo, da imate element in želite dodati obravnavo dogodkov za vse njegove podrejene elemente. Nato bi se morali po njih pomikati z uporabo metode myForm.querySelectorAll("input"), kot je prikazano zgoraj. Lahko pa preprosto dodate elemente v obrazec in preverite njihovo vsebino z uporabo event.target.

MyForm.addEventListener("sprememba", funkcija (dogodek) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

In še ena prednost te metode je, da bo upravljalnik samodejno pritrjen na nove podrejene elemente.

Animacija

Najlažji način za dodajanje animacije je uporaba CSS z lastnostjo prehoda. Toda za večjo prilagodljivost (na primer za igre) je JavaScript bolj primeren.

Klicanje metode window.setTimeout(), dokler se animacija ne konča, ni dobra ideja, saj lahko vaša aplikacija zamrzne, zlasti na mobilne naprave. Bolje je uporabiti window.requestAnimationFrame(), da shranite vse spremembe do naslednjega ponovnega risanja. Kot argument vzame funkcijo, ki nato prejme časovni žig:

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

Na ta način se doseže zelo gladka animacija. Mark Brown v svojem članku obravnava to temo.

Pisanje lastne knjižnice

Dejstvo, da morate v DOM-u ves čas ponavljati elemente, da izvedete kakršne koli operacije na elementih, se lahko zdi precej dolgočasno v primerjavi s sintakso jQuery $(".foo").css((color: "red")). Toda zakaj ne bi napisali nekaj svojih metod, da bi olajšali to nalogo?

Const $ = funkcija $ (selektor, kontekst = dokument) ( const elements = Array.from(context.querySelectorAll(selector)) return ( elements, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) vrni to ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) vrni to ), on (dogodek, obravnavalnik, možnosti) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options) )) vrni to ) ) )

Psevdokoda

$(".rightArrow").click(function() (rightArrowParents = this.dom(); //.dom(); je psevdo funkcija ... mora prikazati celotno opozorilo(rightArrowParents); ));

Alarmno sporočilo bo:

body div.lol a.rightArrow

Kako lahko to pridobim z uporabo javascript/jquery?

Uporaba jQuery, kot je ta (ki ji sledi rešitev, ki ne uporablja jQuery, razen za dogodek, veliko manj klicev funkcij, če je to pomembno):

Primer v realnem času:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName .toLowerCase(); if (this.className) ( vnos += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); alert(rightArrowParents.join (" ")); vrni napačno; )); Klikni tukaj

(V primerih v živo sem posodobil atribut razreda na divu v lol multi, da pokažem ravnanje z več razredi.)

Tukaj je rešitev za natančno ujemanje elementov.

Pomembno je razumeti, da selektor (ni resnično), ki kažejo orodja Chroma, ne identificirajo enolično elementa v DOM. ( na primer, ne bo razlikoval med seznamom zaporednih elementov razpona. Ni informacij o položaju/indeksiranju)

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

In lahko ga uporabite takole:

Console.log($("some-selector").fullSelector());

Prestavil sem del iz T.J. Crowder to tiny vtičnik jQuery. Uporabil sem različico jQuery, čeprav ima prav, da je popolnoma nepotrebna režija, vendar jo uporabljam samo za namene odpravljanja napak, tako da me ne skrbi.

Uporaba:

Ugnezdeni razpon Preprost razpon 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"), pot = ""; while (typeof obj.prop("tagName") != "undefined")( if (obj.attr("class"))( path = "."+obj.attr("class").replace(/\s /g , ".") + pot; ) if (obj.attr("id"))( pot = "#"+obj.attr("id") + pot; ) pot = " " +obj.prop( "tagName").toLowerCase() + pot; obj = obj.parent(); ) console.log(path);

pozdravljeni, ta funkcija razreši napako, povezano s tem, da trenutni element ni prikazan na poti

Preverite zdaj

$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) ( entry += "." + 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 (event .target.className) (vnos += "." + event.target.className.replace(/ /g, "."); )else if(event.target.id)( vnos += "#" + dogodek. target.id; ) rightArrowParents.push(vnos); // )

Kjer je $j = spremenljivka jQuery

problem rešite tudi z .. v imenu razreda

tukaj je nadomestna funkcija:

Funkcija escapeRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) funkcija replaceAll(str, find, replace) ( return str.replace(new RegExp(escapeRegExp(find), "g"), replace); )

Tukaj je izvorna različica JS, ki vrne pot jQuery. Dodam tudi ID-je za elemente, če obstajajo. To vam bo dalo možnost, da izberete najkrajšo pot, če vidite ID v matriki.

Varna pot = 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

Tukaj je funkcija.

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 ; ) vrni stack.slice(1); // odstrani element html)

Zapletene in težke spletne aplikacije so danes postale običajne. Knjižnice za več brskalnikov in enostavne za uporabo, kot je jQuery, s svojo bogato funkcionalnostjo lahko zelo pomagajo pri sprotnem manipuliranju z DOM. Zato ni presenetljivo, da mnogi razvijalci uporabljajo takšne knjižnice pogosteje kot delo z izvornim API-jem DOM, s katerim je bilo veliko težav. Medtem ko so razlike med brskalniki še vedno problem, je DOM zdaj v boljši formi kot pred 5-6 leti, ko je jQuery postajal vse bolj priljubljen.

V tem članku bom prikazal zmožnosti manipulacije HTML DOM, pri čemer se bom osredotočil na nadrejene, podrejene in sosedske odnose. Na koncu bom podal informacije o podpori brskalnika za te funkcije, vendar ne pozabite, da je knjižnica, kot je jQuery, še vedno dobra možnost zaradi prisotnosti napak in nedoslednosti pri izvajanju izvorne funkcionalnosti.

Štetje podrejenih vozlišč

Za predstavitev bom uporabil naslednje HTML oznaka, ga bomo v članku večkrat spremenili:

• Primer ena
• Primer dva
• Primer tri
• Primer štiri
• Primer pet
• Šesti primer

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

Kot lahko vidite, so rezultati enaki, čeprav se uporabljene tehnike razlikujejo. V prvem primeru uporabljam lastnino otrok. To je lastnost samo za branje, vrne zbirko elementi HTML, ki se nahaja znotraj zahtevanega elementa; Za štetje njihovega števila uporabljam lastnost dolžine te zbirke.

V drugem primeru uporabljam metodo childElementCount, za katero menim, da je bolj urejen in potencialno bolj vzdržljiv način (o tem razpravljajte pozneje, mislim, da ne boste imeli težav z razumevanjem, kaj počne).

Lahko poskusim uporabiti childNodes.length (namesto children.length), vendar poglejte rezultat:

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

Vrne 13, ker je childNodes zbirka vseh vozlišč, vključno s presledki – imejte to v mislih, če vas zanima razlika med podrejenimi vozlišči in vozlišči podrejenih elementov.

Preverjanje obstoja podrejenih vozlišč

Če želite preveriti, ali ima element podrejena vozlišča, lahko uporabim metodo hasChildNodes(). Metoda vrne logično vrednost, ki označuje njihovo prisotnost ali odsotnost:

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

Vem, da ima moj seznam podrejena vozlišča, vendar lahko spremenim HTML, tako da jih ni; Oznaka je zdaj videti takole:

In tukaj je rezultat ponovnega izvajanja hasChildNodes():

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

Metoda še vedno vrne true. Čeprav seznam ne vsebuje nobenih elementov, vsebuje presledek, ki je veljavna vrsta vozlišča. Ta metoda upošteva vsa vozlišča, ne le vozlišča elementov. Da hasChildNodes() vrne false, moramo znova spremeniti oznako:

In zdaj je pričakovani rezultat prikazan v konzoli:

Console.log(myList.hasChildNodes()); // napačno

Seveda, če vem, da bi lahko naletel na prazen prostor, bom najprej preveril obstoj podrejenih vozlišč, nato pa uporabil lastnost nodeType, da ugotovim, ali so med njimi vozlišča elementov.

Dodajanje in odstranjevanje podrejenih elementov

Obstajajo tehnike, ki jih lahko uporabite za dodajanje in odstranjevanje elementov iz DOM. Najbolj znan med njimi temelji na kombinaciji metod createElement() in appendChild().

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

V tem primeru ustvarim z metodo createElement() in jo nato dodam v telo. Je zelo preprosto in verjetno ste to tehniko že uporabili.

Toda namesto da bi posebej vstavil element, ki se ustvarja, lahko uporabim tudi appendChild() in preprosto premaknem obstoječi element. Recimo, da imamo naslednje oznake:

• Primer ena
• Primer dva
• Primer tri
• Primer štiri
• Primer pet
• Šesti primer

Primer besedila

Lokacijo seznama lahko spremenim z naslednjo kodo:

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

Končni DOM bo videti takole:

Primer besedila

• Primer ena
• Primer dva
• Primer tri
• Primer štiri
• Primer pet
• Šesti primer

Upoštevajte, da je bil celoten seznam odstranjen s svojega mesta (nad odstavkom) in nato vstavljen za njim pred zaključno telo. Čeprav se metoda appendChild() običajno uporablja za dodajanje elementov, ustvarjenih s createElement(), jo je mogoče uporabiti tudi za premikanje obstoječih elementov.

Prav tako lahko popolnoma odstranim podrejeni element iz DOM z uporabo removeChild(). Naš seznam iz prejšnjega primera izbrišemo tako:

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

Element je zdaj odstranjen. Metoda removeChild() vrne odstranjen element, da ga lahko shranim, če ga bom potreboval pozneje.

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

Obstaja tudi metoda ChildNode.remove(), ki je bila relativno nedavno dodana specifikaciji:

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

Ta metoda ne vrne oddaljenega predmeta in ne deluje v IE (samo Edge). In obe metodi odstranita besedilna vozlišča na enak način kot vozlišča elementov.

Zamenjava podrejenih elementov

Obstoječi podrejeni element lahko zamenjam z novim, ne glede na to, ali ta novi element obstaja ali pa sem ga ustvaril iz nič. Tukaj je oznaka:

Primer besedila

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "primer"; myDiv.appendChild(document.createTextNode("Novo besedilo elementa")); document.body.replaceChild(myDiv, myPar);

Novo besedilo elementa

Kot lahko vidite, metoda replaceChild() sprejme dva argumenta: novi element in stari element, ki ga nadomesti.

To metodo lahko uporabim tudi za premikanje obstoječega elementa. Oglejte si naslednji HTML:

Primer besedila 1

Primer besedila 2

Primer besedila 3

Tretji odstavek lahko zamenjam s prvim odstavkom z naslednjo kodo:

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

Zdaj je ustvarjeni DOM videti takole:

Primer besedila 2

Primer besedila 1

Izbira posebnih otrok

Več jih je različne poti izbiro določenega elementa. Kot je bilo prikazano prej, lahko začnem z uporabo zbirke otrok ali lastnosti childNodes. Toda poglejmo druge možnosti:

Lastnosti firstElementChild in lastElementChild naredita točno to, kar nakazujeta njuni imeni: izbereta prvi in ​​zadnji podrejeni element. Vrnimo se k našemu označevanju:

• Primer ena
• Primer dva
• Primer tri
• Primer štiri
• Primer pet
• Šesti primer

S temi lastnostmi lahko izberem prvi in ​​zadnji element:

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

Lastnosti previousElementSibling in nextElementSibling lahko uporabim tudi, če želim izbrati podrejene elemente, ki niso prvi ali zadnji. To se naredi s kombinacijo lastnosti firstElementChild in lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Drugi primer" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Primer pet"

Obstajajo tudi podobne lastnosti firstChild , lastChild , previousSibling in nextSibling , vendar upoštevajo vse vrste vozlišč, ne le elementov. Na splošno so lastnosti, ki upoštevajo samo vozlišča elementov, uporabnejše od tistih, ki izberejo vsa vozlišča.

Vstavljanje vsebine v DOM

Ogledal sem si že načine za vstavljanje elementov v DOM. Pojdimo naprej podobna tema in si oglejte nove možnosti za vstavljanje vsebine.

Prvič, obstaja preprosta metoda insertBefore(), podobno kot replaceChild(), uporablja dva argumenta in deluje z novimi elementi in obstoječimi. Tukaj je oznaka:

• Primer ena
• Primer dva
• Primer tri
• Primer štiri
• Primer pet
• Šesti primer

Primer odstavka

Bodite pozorni na odstavek, ki ga bom najprej odstranil in nato vstavil pred seznam, vse naenkrat:

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

V nastalem HTML-ju bo odstavek prikazan pred seznamom in to je še en način za zavijanje elementa.

Primer odstavka

• Primer ena
• Primer dva
• Primer tri
• Primer štiri
• Primer pet
• Šesti primer

Tako kot replaceChild() ima tudi insertBefore() dva argumenta: element, ki ga želite dodati, in element, pred katerega ga želimo vstaviti.

Ta metoda je preprosta. Poskusimo zdaj zmogljivejšo metodo vstavljanja: metodo insertAdjacentHTML().