Az oldal HTML forrásának manipulálása JavaScriptből az innerHTML tulajdonság segítségével
ez a konténer egyelőre üres.
Kommentár
Sokszor szükség van az oldal HTML forrásának manipulálására JavaScriptből.
Két lehetőség közül választhatunk:
DOM segítségével
HTML elemek .innerHTML tulajdonságának manipulálása
Ez a példakód az utóbbi lehetőséggel folglalkozik.
Elsősorban arra mutat rá, hogy az .innerHTML
használata mikor nem ajánlott.
Az .innerHTML tulajdonságot a Microsoft vezette be az Internet Explorer egy régebbi verziójában.
A megoldást, mint egy elég jól használható lehetőséget, késobb átvette a többi böngésző is, így ma már minden elterjedt böngészőben használható
(IE, Firefox, Opera, Safari), gyakorlatilag kvázi szabvánnyá vált.
Bár jelenleg nem szabványos a megoldás, a következő DOM szabványnak a WhatWG tevékenységének köszönhetően várhatóan része lesz.
Kettő narancssárga színnel kiemelt konténer elem van az oldalon. Az első konténer egy összetett HTML struktúrát tartalmaz.
A két konténer között található nyomógomb lenyomásakor az első konténer elem (div tag) HTML részlete (az elem .innerHTML tulajdonságának értéke)
áthelyeződik a második konténerbe. DOM manipulációval ugyanezt a feldatot csak tekintélyes kódtömeggel tudtuk volna elérni.
Az innerHTML-t gyorsasága és egyszerüsége miatt alkalmazzák.
Az oldal betöltésekor egy eseménykezelő függvény lett hozzárendelve a "Cancel" hivatkozás onclick tulajdonságához.
Rákattintva a hivatkozásra egy üzenet jelenik meg. Ezt ki is próbálhatjuk, ha még nem nyomtuk meg a két konténer között elhelyezkedő nyomógombot.
Ha egy HTML elem innerHTML tulajdonságának értékét egy másik HTML elem innerHTML tulajdonságához rendeljük
(az elso elem innerHTML tulajdonságához üres sztringet kell rendelni), az eseménykezelő függvényeket újból hozzá kell rendelni a
HTML elemekhez. A nyomógomb lenyomása után hiába kattintunk a "Cancel" hivatkozásra,
az eseménykezelő függvény nem kerül meghívásra.
Összegzés
Tisztán a DOM csak apró módosítások esetén kényelmes.
az .innerHTML kitünően alkalmas HTML részletek áthelyezésére az oldal DOM fáján belül
ha egy HTML részletet áthelyeztünk az .innerHTML tulajdonság használatával, ne felejtsük el
az eseménykezelő függvényeket újból hozzárendelni a DOM elemekhez (amennyiben voltak ).
Ebben a példában a beállítandó HTML részlet már előre adott volt, azt egy konténer elem innerHTML tulajdonságából nyertük.
Ha mi magunk akarunk nagyobb HTML részletet előállítani JavaScriptből, sztringek összefüzésével, az innerHTML-es megoldás
karbantarthatósági problémákat miatt nem bizonyul ideálisnak (idézőjelezés, JavaScriptben nagyon lassú a konkatenáció, az eredmény
egy nem túl átlátható kódtömeg).
Nagy HTML részletek előallítására különböző kliens oldali JavaScript segédkönyvtárak születtek. Ilyen például a
JavaScript Templates (JST),
ami nem más, mint a szerver oldali nyelveknél megszokott sablonkezelő rendszer, ezúttal teljes mértékben JavaScriptben implementálva.
- DOM segítségével
- HTML elemek
Ez a példakód az utóbbi lehetőséggel folglalkozik. Elsősorban arra mutat rá, hogy az.innerHTMLtulajdonságának manipulálása.innerHTMLhasználata mikor nem ajánlott.Az .innerHTML tulajdonságot a Microsoft vezette be az Internet Explorer egy régebbi verziójában. A megoldást, mint egy elég jól használható lehetőséget, késobb átvette a többi böngésző is, így ma már minden elterjedt böngészőben használható (IE, Firefox, Opera, Safari), gyakorlatilag kvázi szabvánnyá vált. Bár jelenleg nem szabványos a megoldás, a következő DOM szabványnak a WhatWG tevékenységének köszönhetően várhatóan része lesz.
Kettő narancssárga színnel kiemelt konténer elem van az oldalon. Az első konténer egy összetett HTML struktúrát tartalmaz. A két konténer között található nyomógomb lenyomásakor az első konténer elem (div tag) HTML részlete (az elem
.innerHTMLtulajdonságának értéke) áthelyeződik a második konténerbe. DOM manipulációval ugyanezt a feldatot csak tekintélyes kódtömeggel tudtuk volna elérni. Az innerHTML-t gyorsasága és egyszerüsége miatt alkalmazzák.Az oldal betöltésekor egy eseménykezelő függvény lett hozzárendelve a "Cancel" hivatkozás onclick tulajdonságához. Rákattintva a hivatkozásra egy üzenet jelenik meg. Ezt ki is próbálhatjuk, ha még nem nyomtuk meg a két konténer között elhelyezkedő nyomógombot. Ha egy HTML elem innerHTML tulajdonságának értékét egy másik HTML elem innerHTML tulajdonságához rendeljük (az elso elem innerHTML tulajdonságához üres sztringet kell rendelni), az eseménykezelő függvényeket újból hozzá kell rendelni a HTML elemekhez. A nyomógomb lenyomása után hiába kattintunk a "Cancel" hivatkozásra, az eseménykezelő függvény nem kerül meghívásra.
Összegzés.innerHTMLkitünően alkalmas HTML részletek áthelyezésére az oldal DOM fáján belül.innerHTMLtulajdonság használatával, ne felejtsük el az eseménykezelő függvényeket újból hozzárendelni a DOM elemekhez (amennyiben voltak ).Nagy HTML részletek előallítására különböző kliens oldali JavaScript segédkönyvtárak születtek. Ilyen például a JavaScript Templates (JST), ami nem más, mint a szerver oldali nyelveknél megszokott sablonkezelő rendszer, ezúttal teljes mértékben JavaScriptben implementálva.