JavaScript getElementBy és innerHTML használata (Szöveg írása HTML dokumentumba JS segítségével)

Ebben a leckében megtanuljuk azt, hogy hogyan írhatunk JavaScript segítségével szöveget egy HTML dokumentumba. Ennek mentén először bemutatjuk a getElementBy több különböző metódusát, illetve az innerHTML függvényt is. Majd ötvözzük ezt a két eljárást, hogy a címben említett feladatot megtudjuk oldani.

Ingyenes JavaScript leckék, magyarul - JavaScript bejegyzések borítóképe

JavaScript getElementBy és innerHTML használata (Szöveg írása HTML dokumentumba JS segítségével)

Ebben a leckében megtanuljuk azt, hogy hogyan írhatunk JavaScript segítségével szöveget egy HTML dokumentumba. Ennek mentén először bemutatjuk a getElementBy több különböző metódusát, illetve az innerHTML függvényt is. Majd ötvözzük ezt a két eljárást, hogy a címben említett feladatot megtudjuk oldani.

getElementBy

Először ismerkedjünk meg a getElementBy metódusokkal. A névből már leszűrhető, hogy egy elemet ér el valami alapján, amit a “By” szó után adunk meg.

Ezek a getElementBy metódusok érhetőek le a JavaScript-ben:

  • getElementById()
  • getElementsByClassName()
  • getElementsByName()
  • getElementsByTagName()

getElementById()

A leggyakrabban használt getElementBy metódus a getElementById(), ilyenkor az elemet ID alapján érjük el. Visszaadja azt az elemet, amelynek az ID-ja megegyezik az általunk megadott azonosítóval. Ha nem létezik a keresett ID, akkor null értékkel tér vissza.

Általában akkor használjuk, ha szeretnénk valamilyen adatot kinyerni egy elemből, illetve módosítani annak a tartalmát.

Az ID-nak egyedinek kell lennie, azonban ha a rendszer több ugyanazon ID-val rendelkező elemet talál, akkor az első találat értékét adja vissza.

Szintaxis

document.getElementById(AZONOSÍTÓ);
Code language: JavaScript (javascript)

A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az “AZONOSÍÓ” helyére egy szöveget vár, amely a keresett elem azonosítója.

Példa

JavaScript kód

<body>

<p id="szoveg1">Ezt kérjük le.</p>
<p id="szoveg2">Ezzel nem foglalkozunk.</p>

<button onclick="szin()">Nyomd meg a működéshez.</button>

<script>
function szin() {  
document.getElementById("szoveg1").style.backgroundColor = "yellow";
}
</script>

</body>

Code language: HTML, XML (xml)

Eredmény

Ezt kérjük le.

Ezzel nem foglalkozunk.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A példában szerepel két p bekezdésünk, az egyiknek “szoveg1”, a másiknak “szoveg2” az azonosítója. A szkriptünkbe megadjuk, hogy keresse meg a dokumentum “szoveg1” id-val rendelkező elemét, majd megadjuk, hogy a stílusához szeretnék hozzányúlni, majd beállítjuk, hogy sárga legyen a háttérszín. És mindez egy gomb megnyomására történik meg.

getElementsByClassName()

Nem meglepő módon a “getElementsByClassName()” ugyanazt csinálja, mint az előző metódus, csak ez a megadott osztálynévnek megfelelő értékekkel tér vissza. Az előzőhöz képest még jelentős különbség, hogy egy osztálynak nem kell egyedinek lennie, így ez függvény egy tömbszerű objektummal tér vissza.

Szintaxis

document.getElementsByClassName(OSZTÁLYNÉV);
Code language: JavaScript (javascript)

A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az “OSZTÁLYNÉV” helyére egy szöveget vár, amely a keresett elem azonosítója.

getElementsByName()

A “getElementsByName()” metódus azon elemek kollekciójával, gyűjteményével tér vissza, amelyek értéke megegyezik a “name” attribútummal.

Szintaktika

document.getElementsByName(NAME)

Code language: JavaScript (javascript)

A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az “NAME” helyére egy szöveget vár, amely a keresett elem azonosítója.

getElementsByTagName()

Azon elemek gyűjteményével tér vissza, amelyek tag neve megegyezik az általunk megadottal.

Szintaktika

document.getElementsByName(TAGNÉV)
Code language: JavaScript (javascript)

A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az “TAGNÉV” helyére egy szöveget vár, amely a keresett elem azonosítója.

innerHTML

Az innerHTML segítségével fogjuk valóra váltani a cikk címében említett dolgot, azaz szöveget írunk egy HTML dokumentumba a JavaScript segítségével.

Az “innerHTML“-t két dologra lehet használni:

Szintaktika

KeresettElem.innerHTML;

VAGY

KeresettElem.innerHTML = SZÖVEG;

Az első kód a HTML elem tartalmának lekérdezésében segít, ezt érdemes egyből kiíratnunk vagy eltárolnunk egy változóban, hogy később is feltudjuk használni. Vagy pedig azonnal végezhetünk vele valamilyen műveletet, vizsgálatot.

A második opció azok számára szükséges, akik szeretnék módosítani egy már létező HTML elem tartalmát. Ilyenkor a “SZÖVEG” helyére szükséges írnunk azt, amit szeretnénk beleíratni a keresett elembe. Fontos, hogy ebben az esetben alapértelmezetten felülíródik az elem eredeti tartalma az általunk beállított szöveggel.

A “KeresettElem” helyére a fent említett módszerekkel kell megadnunk azt, hogy melyik elemre gondolunk. Nézünk rá egy példát kicsit lentebb.

Példa

JavaScript kód

<body>

<p id="szoveg1">Ennek olvassuk ki a tartalmát.</p>
<p id="szoveg2">Ennek írjuk át a tartalmát.</p>

<button onclick="kiolvas()">Kiolvas.</button>
<button onclick="atir()">Átír.</button>

<script>

function kiolvas() {  
alert(document.getElementById("szoveg1").innerHTML);
}

function atir() {  
document.getElementById("szoveg2").innerHTML = "Erre írtam át a tartalmat.";
}

</script>

</body>

Code language: HTML, XML (xml)

Eredmény

Ennek olvassuk ki a tartalmát.

Ennek írjuk át a tartalmát.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Létrehoztunk két függvényt, a “kiolvas()” csak kiolvassa a tartalmat és egy alert()-be kiírja azt, míg az “atir()” a “szoveg2” tartalmát cseréli le az “Erre írtam át a tartalmat.” szövegre.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!