Die skep en invoeg van elemente op JavaScript

Nou sal ons leer hoe om nuwe DOM-elemente via JavaScript te skep, en dit dan by die bladsy te voeg. Vir hierdie doel word die metode createElement gebruik. Die parameter van hierdie metode moet die naam van die tag wees wat geskep moet word.

As die resultaat van createElement in 'n veranderlike gestoor word, sal daardie veranderlike so 'n element bevat, asof ons dit verkry het deur querySelector.

Die enigste verskil is - ons element sal nie op die bladsy geplaas wees nie. Maar ons kan sy teks verander, kenmerke toevoeg, gebeurtenishandlers daaraan koppel en uiteindelik op die bladsy plaas.

Om die nuwe element op die bladsy te plaas, word die metode appendChild gebruik. Hierdie metode moet toegepas word op die element waarin ons ons element wil plaas. En die parameter van die metode moet ons nuwe element wees, wat vroeër geskep is deur createElement.

Kom ons kyk na 'n praktiese voorbeeld. Laat ons aanneem ons het 'n div, en daarin - 'n paar paragrawe:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Kom ons skep 'n paragraaf, stel sy teks daarin en plaas dit op die bladsy aan die einde van die blok #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Die resultaat van die uitvoering van die kode:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Gegee 'n ol:

<ol id="elem"></ol>

Voeg aan sy einde 'n li met die teks 'item' in.

Gegee 'n ol en 'n knoppie:

<ol id="elem"></ol>
<button id="button">click me</button>

Maak dit so dat met 'n klik op die knoppie, 'n li met die teks 'item' by die einde van die lys gevoeg word.