ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

HTML Inhalt einer Div Ebene mit JS ändern

Javascript ist dafür sehr schön, dass ganz viele nette Veränderungen an Ihrer Seite in Echtzeit und ohne ein neues Laden Ihrer Seite möglich sind. Somit wird Ihr HTML Code DHTML - dynamisches HTML. Um das zu tun, müssen Sie natürlich wissen, wie Sie mit Javascript die HTML Elemente referenzieren können und was dabei alles möglich ist zu ändern. Darüber hinaus zeigen wir Ihnen was Sie gerade mit Ajax und dynamisches HTML machen können.

Die meisten HTML Elemente können nur einen neuen Wert erhalten, viel interessanter ist es, wenn Sie ganze HTML Abschnitte verändern können und Seiten komplett verändern möchten. Beispielsweise haben Sie Seiten mit Reitern, die Sie mit AJAX dynamisch laden möchten. Hierzu benötigen Sie Div Ebenen (

Tag), die solche Manipulierungen von HTML mit Javascript zulassen.

Lösung - HTML Inhalt in eine Div Ebene mit Javascript ändern

Angenommen, Sie haben ein Div in Ihrem HTML Code, der so aussieht:

Montag
Autor - Michael Schmidt

Durch die Angabe von id können Sie nun diesen Div-Layer mit Javascript referenzieren und den Inhalt manipulieren. Das machen Sie mit innerHTML folgendermaßen:

document.getElementById('MeinText').innerHTML='Dienstag
Autor: Stephan Müllers';

Bitte, achten Sie auf die Schreibweise von innerHTML, Javascript ist Case-Sensitive.

Mit Ajax eine Div Ebene ändern

Wir geben Ihnen hier ein Beispiel, wie Sie eine Ajax Funktion einsetzen können, um eine Div Ebene zu manipulieren, nachdem der AJAX Aufruf fertig geladen hat (asynchronous):

 var request = CreateAjaxObject();
 request.onreadystatechange = function(){  
  if(request.readyState == 4){   
   document.getElementById('MeinText').innerHTML = request.responseText;
   
  } 
 }  
 request.open('get', '/index.php?funktion=1' true);
 request.send(null);

An dieser Stelle ist es wichtig zu erwähnen, dass die CreateAjaxObject Funktion ein gültiges Ajax Objekt liefern muss. Diese Funktion können Sie selber verfassen und für verschiedene Browser anpassen. Nun unsere Funktionsbeschreibung:

function CreateAjaxObject() {
    request = false;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
        if (request.overrideMimeType) {
         request.overrideMimeType('text/xml');
        }
    } else if (window.ActiveXObject) { // IE
        try {
         request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
             request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
   
    return request;
}

Diese Funktion ist mit allen Browsern kompatibel.

 

 

û