HTML dynamisch wijzigen
Hieronder zie je een tekst staan: het woord Midden. Als je er met de muis op klikt verandert deze in een andere tekst. Als je er weer op klikt wordt het een plaatje. Ook de opmaak verandert steeds.
Dit soort zaken bereik je met behulp van de eigenschap innerHTML van het object document. Op deze bladzijde
staan een paar voorbeelden beschreven van hoe je dat zou kunnen gebruiken op je eigen website.
De mogelijkheden die je met innerHTML hebt zijn heel uitgebreid. De beschrijving op deze bladzijde is echter maar heel
summier.
De code staat onderaan deze bladzijde. Je kunt hem downloaden als startpunt om zelf mee aan de slag te gaan.
- Het deel van een HTML-document dat in de browser zichtbaar is wordt opgeslagen in een object met de naam innerHTML. De browser toont de inhoud van innerHTML op het scherm. Als je innerHTML verandert, verandert het scherm mee. Dit geldt ook voor de opmaak!
- Het is niet praktisch om de hele pagina op deze manier te veranderen. Meestal zul je maar een deel van een pagina willen
aanpassen. Zet die betreffende HTML dan tussen <DIV>-tags waaraan je een id meegeeft. Verander vervolgens
de innerHTML die hoort bij die id. Dat is de aanpak die op deze pagina is gebruikt.
- Het woord Midden op deze bladzijde heeft id="my_html". Deze wordt
veranderd met de JavaScript opdracht:
document.getElementById("my_HTML").innerHTML = [html-code, zie onderaan]. - De volledige <DIV>-tag luidt:
<div id="my_html" style="position:relative;cursor:help" onClick="Verander()">- De style="position:relative" is noodzakelijk om te zorgen dat de wijzigingen op 'deze' plaats worden getoond. Anders komt alles in de linkerbovenhoek. De cursor-style is om het een beetje mooi te maken.
- De <DIV>-tag bevat ook een event-handler die de JavaScript-function Verander() aanroept als op de <DIV>-tag wordt geklikt.
- De JavaScript function Verander() kiest een regel HTML-code uit de array TheHTML en plaatst
die in de bestaande innerHTML van het document met id="my_html".
Bij de eerste aanroep wordt de oorspronkelijke HTML-code uit de pagina gehaald en in element 0 van de array gezet, zodat deze later weer gebruikt kan worden. - De HTML-code die in de array TheHTML staat bevat ook opmaak-tags. Dat heeft tot gevolg dat de
opmaak mee verandert. Let op de style die bij het plaatje wordt genoemd.
- Er is duidelijk verschil met de STYLES visibility en display om dingen wel of niet te laten weergeven. De informatie waarvoor deze styles worden gebruikt zijn gewoon in innerHTML aanwezig. Door het veranderen van visibility in visible of hidden, respectievelijk het veranderen van display in block of none, geef je aan of een stuk van innerHTML wel of niet moet worden getoond en hoe dat moet gebeuren.
- Het gedrag van visibility en display wordt besproken in het item "Informatie laten verdwijnen en weer laten verschijnen".
- Je kunt dit gebruiken bij alle geldige HTML-code. Gebruik van scripts wordt niet aangeraden. Het beperkt zich tot aanroep van functions. Het definiëren van functions wordt sterk afgeraden, omdat niet alle browsers er op dezelfde wijze mee omgaan.
Een tweede voorbeeld:
Hieronder staat een tekst-invoerveld. Alles wat er er in typt wordt op de regel eronder direct getoond:
Het tekstveld heeft de event-handler onKeyUp. Als er een karakter wordt ingetypt en de toets wordt
losgelaten, wordt de innerHTML op de volgende regel bijgewerkt.
Hier zijn <span>-tags gebruikt om de dynamische tekst van een id te voorzien. Dat werkt
goed als je de aanpassingen in één regel wilt zetten.
In de praktijk kun je alle tags gebruiken die het attribuut id hebben. Pas op voor zij-effecten.
Vooral met formulieren kun je hele rare bijverschijnselen veroorzaken.
Gebruik:
- De code staat in de <BODY>.
- JavaScript functions staan in de <HEAD>.
De code ziet er als volgt uit: (Eerste voorbeeld)
(Zet dit in de <HEAD>).
(Zet dit in de <BODY>).<script>
var theNumberOfLines = 3;
var TheHTML = Array(theNumberOfLines); // Add as many lines as you need.
TheHTML[0] = '';
TheHTML[1] = '<div align="left"><h3><i>Links</i></h3></div>'; // HTML-code
TheHTML[2] = '<div align="right"><img src="../images/pijl_r.gif" alt="" width="80" height="53" hspace="5" border="0" style="float:right"></div>';
var index = -1;
function Verander() {
if (index == -1) {
TheHTML[0] = document.getElementById("my_html").innerHTML;
index++;
}
index++; if (index >= theNumberOfLines) index = 0;
document.getElementById("my_html").innerHTML = TheHTML[index];
}
</script>
<div id="my_html" style="position:relative;cursor:help"
onClick="Verander()">
<div align="center" class="KopB">Midden</div>
</div>
De code ziet er als volgt uit: (Tweede voorbeeld)
(Dit staat in de <BODY>).
<div align="center">
<form name="formulier" id="formulier">
<input type="text" name="tekst_in" id="tekstveld" size="50" maxlength="250" onKeyUp="document.getElementById('tekst_uit').innerHTML = document.formulier.tekst_in.value"><br>
Je hebt de volgende tekst getypt: <b><span id="tekst_uit"></span></b>
</form></div>
Downloaden:
Druk op de knop:
File: voorb157.zip, 795 bytes.
