Ebben a példában, a színes szakaszra kattintva egy gomb jelenik meg. A gomb HTML kódját egy függvényben rakjuk össze.
A megjelenésre szánt idézőjelekhez adtuk a \ jelet, a többi idézőjel, karakterláncok elejét és végét jelölik.
Az eredményt a böngészőben megnyithatjuk és a ténylegesen megjelenő tartalom kódját is ellenőrizhetjük (jobb klikk/Inspect Element) Csak a megjelölt idézőjelek jelennek meg.

A for ismétlő struktúra:
Ha utasításokat akarunk többször végrehajtani, ismétlő struktúrákra van szükségünk.
A for struktúrát főként akkor használjuk, ha az ismétlések száma előre ismert, de átalakíthatóak bármilyen alkalomra.

A for struktúra általunk használt formája:

for (i=1; i<=nr; i++) {
utasítások;
}

Az ismétlés elkezdésekor, az index változó (itt i, de más neve is lehet) kezdeti értéket kap (az is lehet 1-től különböző). Ezután ismétli az utasításokat és minden ismétlés után ellenőrzi a feltételt, igaz értékre folytatja az ismétlést és növeli az index értékét (a megadott formában eggyel, de ez is módosítható).

Ha a feltétel hamis lesz az ismétlés leáll.

Példa a for struktúra használatára:

Ebben a példában két for struktúrát is találhatunk tanulmányozás végett. A CSS beállítások nem láthatóak a képen, hogy a lényegre tudjunk figyelni.

Az első ismétlés tízszer ismétel: az i változó értékét a weboldal első szakaszának tartalmához adja. Az i változó értékei sorrendben: 1 2 3 4 5 6 7 8 9 10.

A szakasz tartalmát kiürítjük, mivel több kattintás hatására megtelik a szakasz számokkal.

A második ismétlés az elsőhöz hasonló, de megmutatja, hogy a HTML kódot kiegészíthetjük JavaScript kódból: tíz gombot adunk egy függvényből az oldalhoz és még egy-egy üzenetablakot is értelmezünk, amelyek ezekre a gombokra kattintva jelennek meg.

Megtekinthetjük az eredményt miután a böngésző kiértékeli a JavaScript kódot és megjeleníti az oldalt, a kódot a böngészőből felfedve.

A while struktúra:
Egy újabb ismétlési forma a while struktúra.
A for struktúrához képest, a while-hoz egyetlen feltételt kell hozzáadni, amely alapján eldönti, hogy meddig ismételje a megadott utasításokat.

A while struktúra formája:

while (feltétel) {
utasítások;
}

Ha a feltétel igaz ismétlünk, és ha hamisnak találjuk leállunk az ismétléssel.

Példa a while struktúra használatára:

Ebben a példában az első ismétlés ugyanazzal az eredménnyel jár, mint az első for struktúránk. Az i változónak a kezdőértéket és a változó növelését a struktúrától függetlenül adjuk meg.
A kezdő értékadás az ismétlés előtt történik, az érték növelését ismételjük.
A második ismétlés tíz véletlen számot add az oldal második szakaszához. A zöld téglalapra való minden kattintás, újabb tíz értéket eredményez 1 és 101 között.

Példa új szakaszok beillesztésére/eltávolítására JS kódból:

Ebben a példában láthatjuk, hogyan adhatunk hozzá/távolíthatunk el helyesen új elemeket egy dokumentumhoz.

Az előző példában csak egyszerűen beírtuk az elemeket (gombokat) egy másik létező elembe. Az innerHTML-be szövegként való hozzáadás működik, de megzavarhatja/leállíthatja a már működő eseményfigyelőket és lehetetlenné teszi az elemek elegáns eltávolítását vagy hozzáadását.
A randcolor függvényt használjuk a 24. leckéből.
A newdiv függvény az első gomb lenyomására aktiválódik és a d váltózóba kerül a rá vonatkozó referencia. Adunk egy értéket azonosítóként az id tulajdonságnak, hogy a szakaszt később azonosító alapján megtalálja a deldiv függvény. Az azonosítók egyediek, mivel egy folyamatosan növekvő számértéket is csatolunk hozzájuk.
Az appenChild metódussal az új szakaszt hozzáadjuk a dokumentumhoz, majd egy véletlen színt állítunk be háttérszínként, hogy jobban látszódjon, hogy melyik az új szakasz, illetve melyik törlődik.
A deldiv függvény eltávolítja az utolsó szakaszt a dokumentumból. Bármelyiket eltávolíthatnánk, de első példának ez elég. Az eltűntetésre a removeChild metódust használjuk.