Vanligvis bruker utviklere jQuery når de trenger å gjøre noe med DOM. Imidlertid kan nesten enhver DOM-manipulasjon gjøres i ren JavaScript ved å bruke DOM API.

La oss se på denne APIen mer detaljert:

Til slutt vil du skrive ditt eget enkle DOM-bibliotek som kan brukes i ethvert prosjekt.

DOM-spørringer

DOM-spørringer utføres ved hjelp av .querySelector()-metoden, som tar en vilkårlig CSS-velger som argument.

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

Det vil returnere det første matchende elementet. Du kan gjøre det motsatte - sjekk om elementet samsvarer med velgeren:

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

Hvis du ønsker å få alle elementene som samsvarer med en velger, bruk følgende konstruksjon:

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

Hvis du vet hvilket overordnet element du vil referere til, kan du ganske enkelt søke gjennom dets underordnede element i stedet for å søke gjennom hele koden:

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

Spørsmålet oppstår: hvorfor da bruke andre, mindre praktiske metoder som .getElementsByTagName() ? Det er et lite problem - utdataene til .querySelector() blir ikke oppdatert, og når vi legger til et nytt element (se ), vil det ikke endres.

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

Også querySelectorAll() samler alt i én liste, noe som gjør det lite effektivt.

Hvordan jobbe med lister?

På toppen av det har .querySelectorAll() to små forbehold. Du kan ikke bare kalle metoder på resultatene og forvente at de skal brukes på hver enkelt (som du kanskje er vant til å gjøre med jQuery). I alle fall må du iterere gjennom alle elementene i en løkke. For det andre er det returnerte objektet en liste over elementer, ikke en matrise. Derfor vil ikke array-metoder fungere. Selvfølgelig finnes det metoder for lister, noe som .forEach() , men dessverre er de ikke egnet for alle tilfeller. Så det er bedre å konvertere listen til en matrise:

// Bruke Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Eller array-prototype (pre-ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Enklere: .forEach.call( myElements , doSomethingWithEachElement)

Hvert element har noen egenskaper som refererer til en "familie".

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

Siden Element-grensesnittet er arvet fra Node-grensesnittet, er følgende egenskaper også til stede:

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

De første egenskapene refererer til elementet, og de siste (med unntak av .parentElement) kan være lister over elementer av enhver type. Følgelig kan du sjekke elementtypen:

MyElement.firstChild.nodeType === 3 // dette elementet vil være en tekstnode

Legge til klasser og attributter

Legg til ny klasse veldig enkelt:

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

Å legge til en egenskap til et element er det samme som for ethvert objekt:

// Hent attributtverdien const value = myElement.value // Sett attributtet som en elementegenskap myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Du kan bruke metodene .getAttibute(), .setAttribute() og .removeAttribute(). De vil umiddelbart endre elementets HTML-attributter (i motsetning til DOM-egenskaper), noe som vil føre til en nettlesergjengivelse (du kan se alle endringene ved å undersøke elementet ved å bruke nettleserens utviklerverktøy). Slike omtegninger krever ikke bare mer ressurser enn å angi DOM-egenskaper, men kan også føre til uventede feil.

Vanligvis brukes de for elementer som ikke har tilsvarende DOM-egenskaper, for eksempel colspan . Eller hvis bruken av dem virkelig er nødvendig, for eksempel for HTML-egenskaper ved arv (se).

Legge til CSS-stiler

De legges til på samme måte som andre egenskaper:

MyElement.style.marginLeft = "2em"

Noen spesifikke egenskaper kan settes ved hjelp av .style , men hvis du ønsker å få verdiene etter noen beregninger, er det bedre å bruke window.getComputedStyle() . Denne metoden mottar et element og returnerer en CSSStyleDeclaration som inneholder stilene til både selve elementet og dets overordnede:

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

Endre DOM

Du kan flytte elementer:

// Legg til element1 som det siste underordnede av element2 element1.appendChild(element2) // Sett inn element2 som underordnet element til element1 før element3 element1.insertBefore(element2, element3)

Hvis du ikke vil flytte den, men trenger å sette inn en kopi, bruk:

// Lag en klone const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode()-metoden tar en boolsk verdi som et argument, og hvis det er sant, blir underordnede elementer også klonet.

Selvfølgelig kan du lage nye elementer:

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

Og sett dem deretter inn som vist ovenfor. Du kan ikke slette et element direkte, men du kan gjøre det gjennom det overordnede elementet:

MyParentElement.removeChild(myElement)

Du kan også kontakte indirekte:

MyElement.parentNode.removeChild(myElement)

Metoder for elementer

Hvert element har egenskaper som .innerHTML og .textContent , de inneholder HTML-kode og følgelig selve teksten. Følgende eksempel endrer innholdet i et element:

// Change the HTML myElement.innerHTML = ` Nytt innhold ( el.addEventListener("change", function (event) ( console.log(event.target.value) )) ))

Forhindrer standardhandlinger

For å gjøre dette, bruk .preventDefault()-metoden, som blokkerer standardhandlinger. For eksempel vil det blokkere innsending av skjema hvis godkjenning på klientsiden ikke var vellykket:

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

.stopPropagation()-metoden vil hjelpe hvis du har en spesifikk hendelsesbehandler tilordnet til et underordnet element og en andre hendelsesbehandler tilordnet til overordnet for samme hendelse.

Som nevnt tidligere tar .addEventListener()-metoden et valgfritt tredje argument i form av et konfigurasjonsobjekt. Dette objektet må inneholde noen av følgende boolske egenskaper (alle satt til usann som standard):

• capture: hendelsen vil bli knyttet til dette elementet før ethvert annet element nedenfor i DOM;
• én gang: en hendelse kan bare tildeles én gang;
• passiv: event.preventDefault() vil bli ignorert (unntak under feil).

Den vanligste egenskapen er .capture , og den er så vanlig at det er en snarvei for den: i stedet for å sende den inn i et konfigurasjonsobjekt, send bare verdien her:

MyElement.addEventListener(type, lytter, sann)

Håndtere fjernes ved hjelp av .removeEventListener()-metoden, som tar to argumenter: hendelsestypen og en referanse til behandleren som skal fjernes. For eksempel kan once-egenskapen implementeres slik:

MyElement.addEventListener("change", function listener (event) ( console.log(event.type + " ble utløst på " + this) this.removeEventListener("change", listener) ))

Arv

La oss si at du har et element og du vil legge til en hendelsesbehandler for alle dets barn. Deretter må du gå gjennom dem ved å bruke myForm.querySelectorAll("input")-metoden som vist ovenfor. Du kan imidlertid ganske enkelt legge til elementer i skjemaet og sjekke innholdet ved hjelp av event.target .

MyForm.addEventListener("endring", funksjon (hendelse) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

Og en annen fordel med denne metoden er at behandleren automatisk blir knyttet til nye underordnede elementer.

Animasjon

Den enkleste måten å legge til animasjon på er å bruke CSS med overgangsegenskapen. Men for større fleksibilitet (for eksempel for spill) er JavaScript bedre egnet.

Å kalle opp window.setTimeout()-metoden til animasjonen avsluttes er ikke en god idé, siden programmet kan fryse, spesielt på mobile enheter. Det er bedre å bruke window.requestAnimationFrame() for å lagre alle endringer til neste tegning. Den tar en funksjon som et argument, som igjen mottar et tidsstempel:

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

På denne måten oppnås veldig jevn animasjon. I sin artikkel diskuterer Mark Brown dette emnet.

Å skrive vårt eget bibliotek

Det faktum at du i DOM må iterere over elementer hele tiden for å utføre operasjoner på elementer kan virke ganske kjedelig sammenlignet med jQuerys $(".foo").css((farge: "rød")) syntaks. Men hvorfor ikke skrive noen av dine egne metoder for å gjøre denne oppgaven enklere?

Const $ = funksjon $ (velger, kontekst = dokument) ( const elements = Array.from(context.querySelectorAll(selector)) return ( elementer, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) returner dette ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) returner dette ), på (hendelse, behandler, alternativer) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options) )) returner dette ) ) )

Pseudokode

$(".rightArrow").click(function() ( rightArrowParents = this.dom(); //.dom(); er pseudofunksjonen ... den skal vise hele varselet(rightArrowParents); ));

Alarmmeldingen vil være:

body div.lol a.rightArrow

Hvordan kan jeg få dette ved å bruke javascript/jquery?

Bruk av jQuery som dette (etterfulgt av en løsning som ikke bruker jQuery bortsett fra hendelsen, mye mindre funksjonsanrop hvis det er viktig):

Sanntidseksempel:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName .toLowerCase(); if (this.className) ( oppføring += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); alert(rightArrowParents.join (" ")); return usann; )); Klikk her

(I live-eksemplene oppdaterte jeg klasseattributtet på div til å være lol multi for å demonstrere håndtering av flere klasser.)

Her er en løsning for eksakt elementmatching.

Det er viktig å forstå at velgeren (er ikke ekte) som kromverktøy viser ikke identifiserer elementet i DOM unikt. ( for eksempel vil den ikke skille mellom en liste over påfølgende spennelementer. Ingen informasjon om posisjonering/indeksering)

$.fn.fullSelector = function () ( 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) (retur "." + c; )).join("") : "", name = item.nodeName.toLowerCase(), index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; if (navn === "html" || navn === "body") ( returner navn; ) returnerer navn + indeks + id + clss; )).join(" > ") ; return quickCss; );

Og du kan bruke den slik:

Console.log($("noen-velger").fullVelger());

Jeg flyttet et stykke fra T.J. Crowder til bittesmå jQuery-plugin. Jeg brukte jQuery-versjonen, selv om han har rett i at det er helt unødvendig overhead, men jeg bruker det bare til feilsøkingsformål, så jeg bryr meg ikke.

Bruk:

Nestet spenn Enkelt spenn Pre

// resultat (array): ["body", "div.sampleClass"] $("span").getDomPath(false) // resultat (string): body > div.sampleClass $("span").getDomPath( ) // resultat (array): ["body", "div#test"] $("pre").getDomPath(false) // resultat (streng): body > div#test $("pre").getDomPath ()

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

hei denne funksjonen løser feilen knyttet til at det gjeldende elementet ikke vises i banen

Sjekk det ut nå

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

Hvor $j = jQuery Variable

også løse problemet med .. i klassenavn

her er erstatningsfunksjonen:

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

Her er en innebygd JS-versjon som returnerer jQuery-banen. Jeg legger også til IDer for elementene hvis de finnes. Dette vil gi deg muligheten til å ta den korteste veien hvis du ser ID-en i matrisen.

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

Her er funksjonen.

Funksjonen 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 ; ) returner stack.slice(1); // fjerner html-elementet)

Komplekse og tunge nettapplikasjoner har blitt vanlig i disse dager. Biblioteker på tvers av nettlesere og brukervennlige som jQuery med sin rike funksjonalitet kan i stor grad hjelpe til med å manipulere DOM-en i farten. Derfor er det ikke overraskende at mange utviklere bruker slike biblioteker oftere enn å jobbe med den opprinnelige DOM API, som det var mange problemer med. Mens nettleserforskjeller fortsatt er et problem, er DOM i bedre form nå enn det var for 5-6 år siden da jQuery ble stadig mer populært.

I denne artikkelen vil jeg demonstrere HTML-manipulasjonsmulighetene til DOM, med fokus på foreldre-, barn- og naboforhold. Avslutningsvis vil jeg gi informasjon om nettleserstøtte for disse funksjonene, men husk at et bibliotek som jQuery fortsatt er et godt alternativ på grunn av tilstedeværelsen av feil og inkonsekvenser i implementeringen av innebygd funksjonalitet.

Telle barnenoder

For demonstrasjon vil jeg bruke følgende HTML-oppmerking, vil vi endre det flere ganger gjennom artikkelen:

• Eksempel én
• Eksempel to
• Eksempel tre
• Eksempel fire
• Eksempel fem
• Eksempel seks

Var myList = document.getElementById("minList"); console.log(min Liste.barn.lengde); // 6 console.log(myList.childElementCount); // 6

Som du kan se, er resultatene de samme, selv om teknikkene som brukes er forskjellige. I det første tilfellet bruker jeg barneeiendommen. Dette er en skrivebeskyttet egenskap, den returnerer en samling HTML-elementer, plassert inne i det forespurte elementet; For å telle antallet bruker jeg lengdeegenskapen til denne samlingen.

I det andre eksemplet bruker jeg metoden childElementCount, som jeg synes er en ryddigere og potensielt mer vedlikeholdbar måte (diskuter dette mer senere, jeg tror ikke du vil ha problemer med å forstå hva den gjør).

Jeg kunne prøve å bruke childNodes.length (i stedet for children.length), men se på resultatet:

Var myList = document.getElementById("minList"); console.log(myList.childNodes.length); // 1. 3

Den returnerer 13 fordi childNodes er en samling av alle noder, inkludert mellomrom - husk dette hvis du bryr deg om forskjellen mellom underordnede noder og underordnede elementnoder.

Kontrollerer eksistensen av barnenoder

For å sjekke om et element har underordnede noder, kan jeg bruke metoden hasChildNodes(). Metoden returnerer en boolsk verdi som indikerer deres tilstedeværelse eller fravær:

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

Jeg vet at listen min har underordnede noder, men jeg kan endre HTML-en slik at det ikke er noen; Markeringen ser nå slik ut:

Og her er resultatet av å kjøre hasChildNodes() igjen:

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

Metoden returnerer fortsatt sann. Selv om listen ikke inneholder noen elementer, inneholder den et mellomrom, som er en gyldig nodetype. Denne metoden tar hensyn til alle noder, ikke bare elementnoder. For at hasChildNodes() skal returnere usann, må vi endre markeringen igjen:

Og nå vises det forventede resultatet i konsollen:

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

Selvfølgelig, hvis jeg vet at jeg kan støte på mellomrom, vil jeg først sjekke om det finnes underordnede noder, og deretter bruke egenskapen nodeType for å finne ut om det er noen elementnoder blant dem.

Legge til og fjerne barneelementer

Det er teknikker du kan bruke for å legge til og fjerne elementer fra DOM. Den mest kjente av dem er basert på en kombinasjon av metodene createElement() og appendChild().

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

I dette tilfellet oppretter jeg ved å bruke createElement()-metoden og legger den deretter til kroppen . Det er veldig enkelt og du har sikkert brukt denne teknikken før.

Men i stedet for å sette inn spesifikt element som lages, Jeg kan også bruke appendChild() og bare flytte det eksisterende elementet. La oss si at vi har følgende markering:

• Eksempel én
• Eksempel to
• Eksempel tre
• Eksempel fire
• Eksempel fem
• Eksempel seks

Eksempeltekst

Jeg kan endre plasseringen av listen med følgende kode:

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

Den endelige DOM vil se slik ut:

Eksempeltekst

• Eksempel én
• Eksempel to
• Eksempel tre
• Eksempel fire
• Eksempel fem
• Eksempel seks

Legg merke til at hele listen er fjernet fra sin plass (over avsnittet) og deretter satt inn etter den før den avsluttende teksten . Mens appendChild()-metoden vanligvis brukes til å legge til elementer opprettet med createElement() , kan den også brukes til å flytte eksisterende elementer.

Jeg kan også fjerne et underordnet element fra DOM ved å bruke removeChild() . Slik sletter du listen fra forrige eksempel:

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

Elementet er nå fjernet. RemoveChild()-metoden returnerer det fjernede elementet slik at jeg kan lagre det i tilfelle jeg trenger det senere.

Var mittOldChild = document.body.removeChild(minListe); document.body.appendChild(myOldChild);

Det er også en ChildNode.remove()-metode som relativt nylig ble lagt til spesifikasjonen:

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

Denne metoden returnerer ikke det eksterne objektet og fungerer ikke i IE (kun Edge). Og begge metodene fjerner tekstnoder på samme måte som elementnoder.

Bytte ut barneelementer

Jeg kan erstatte et eksisterende underordnet element med et nytt, enten det nye elementet eksisterer eller om jeg opprettet det fra bunnen av. Her er markeringen:

Eksempeltekst

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "eksempel"; myDiv.appendChild(document.createTextNode("Ny elementtekst")); document.body.replaceChild(myDiv, myPar);

Ny elementtekst

Som du kan se, tar replaceChild()-metoden to argumenter: det nye elementet og det gamle elementet det erstatter.

Jeg kan også bruke denne metoden til å flytte et eksisterende element. Ta en titt på følgende HTML:

Eksempeltekst 1

Eksempeltekst 2

Eksempeltekst 3

Jeg kan erstatte det tredje avsnittet med det første avsnittet ved å bruke følgende kode:

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

Nå ser den genererte DOM slik ut:

Eksempeltekst 2

Eksempeltekst 1

Velge spesifikke barn

Det er flere forskjellige måter velge et spesifikt element. Som vist tidligere kan jeg starte med å bruke barnesamlingen eller egenskapen childNodes. Men la oss se på andre alternativer:

Egenskapene firstElementChild og lastElementChild gjør akkurat det navnene deres antyder at de gjør: velg det første og siste underordnede elementet. La oss gå tilbake til markeringen vår:

• Eksempel én
• Eksempel to
• Eksempel tre
• Eksempel fire
• Eksempel fem
• Eksempel seks

Jeg kan velge de første og siste elementene ved å bruke disse egenskapene:

Var myList = document.getElementById("minList"); console.log(myList.firstElementChild.innerHTML); // "Eksempel ett" console.log(myList.lastElementChild.innerHTML); // "Eksempel seks"

Jeg kan også bruke egenskapene previousElementSibling og nextElementSibling hvis jeg vil velge andre underordnede elementer enn det første eller siste. Dette gjøres ved å kombinere egenskapene firstElementChild og lastElementChild:

Var myList = document.getElementById("minList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Eksempel to" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Eksempel fem"

Det finnes også lignende egenskaper firstChild , lastChild , previousSibling og nextSibling , men de tar hensyn til alle typer noder, ikke bare elementer. Generelt er egenskaper som kun vurderer elementnoder mer nyttige enn de som velger alle noder.

Setter inn innhold i DOM

Jeg har allerede sett på måter å sette inn elementer i DOM. La oss gå videre til lignende emne og ta en titt på de nye alternativene for å sette inn innhold.

For det første er det en enkel insertBefore()-metode, omtrent som replaceChild(), den tar to argumenter og fungerer med både nye elementer og eksisterende. Her er markeringen:

• Eksempel én
• Eksempel to
• Eksempel tre
• Eksempel fire
• Eksempel fem
• Eksempel seks

Eksempel avsnitt

Legg merke til avsnittet jeg skal fjerne først, og sett det så inn foran listen, alt i ett slag:

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

I den resulterende HTML-en vil avsnittet vises foran listen, og dette er en annen måte å bryte elementet på.

Eksempel avsnitt

• Eksempel én
• Eksempel to
• Eksempel tre
• Eksempel fire
• Eksempel fem
• Eksempel seks

Som replaceChild(), tar insertBefore() to argumenter: elementet som skal legges til og elementet vi vil sette det inn før.

Denne metoden er enkel. La oss nå prøve en kraftigere innsettingsmetode: insertAdjacentHTML()-metoden.