Skapa element

Vi kan även skapa html-element i JavaScript. Det görs med den inbyggda metoden document.createElement(). Låt säga att vi vill skapa 5 lådor, där vi har stylat klassnamnet box i css.

Om du vill koda med kan du hämta sandboxen.

css

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
  margin: 2px;
}

Dessa lådor vill vi placera inuti vår “content div”.

Först html koden:

html

<div id="content" class="content">
</div>

Sedan skapar vi element på följande sätt:

js, createElement(), appendChild()

const myContent = document.getElementsByClassName('content')[0]

for (let i = 0; i < 5; i++) {
  const box = document.createElement("div")

  box.className = "box"

  myContent.appendChild(box)
}

Vi använder den inbyggda funktionen element.appendChild för att lägga till box-elementen inuti content-elementet. Det går att skapa väldigt många html-element på liknande sätt och manipulera dem i JavaScript.

Bild: Slutresultat, 5 lådor skapade och utritade.

×

Läs mer om createElement.
Läs mer om appendChild.