innerHTML in jQuery

Gegeben sei folgender Quelltext:

<div class="divbox">Wert: 42</div>

In diesem Quelltext sollte der Wert je nach Position eines Sliders anpasst werden. Im ersten Moment versuchte ich es mit der jQuery Funktion replaceWith:

$(".divbox").replaceWith("Wert " + value);

Leider führt diese Methode dazu das der gesamte div Tag ersetzt wird was natürlich nicht erwünscht ist. Zum Glück gibt es in jQuery eine Entsprechung für das innerHTML, diese Funktion hört auf den Namen html:

$(".divbox").html("Wert " + value);

Damit wird nur der Text zwischen den div Tags geändert. Wichtig ist es dabei darauf zu achten das jQuery hier nur die innerHTML Eigenschaft des Browsers durchreicht und dies z.B. dazu führen kann das beim Internet Explorer Attribute in Anführungszeichen zurückgegeben werden.

Weitere Informationen gibt es unter:
http://api.jquery.com/html/
http://api.jquery.com/replaceWith/

Der Internet Explorer und Comboboxen

AJAX ist schon eine feine Sache. Wenn die Daten dann zurückkommen und man damit eine Combobox füllen möchte so sieht das meist so aus:

function showData() {
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
    document.getElementById("combobox").innerHTML = xmlHttp.responseText;
  }
}

Es gibt hierbei bloß ein Problem, der Internet Explorer mag es einfach nicht. Während dieser Code mit Chrome, Firefox, Opera et cetera wunderbar funktioniert, gibt es beim Internet Explorer ein Problem. Er hat Probleme mit dem innerHTML und füllt es einfach nicht.

Damit man nun nicht seinen ganzen Code umschreiben muss gibt es auf http://www.fpruefer.de/blog/archives/innerHTML-und-die-Select-Box-2009-08-04.html eine interessante Funktion welche sich das outerHTML nimmt (welches der Internet Explorer unterstützt) und dort die <select> Tags ausspart und nur alles zwischen diesen Tags ändert. Die Funktion welche die Arbeit dabei erledigt sieht dabei so aus:

function fillSelect(pList, pOptionHTML)
{
  if (pList) {
    if (pList.outerHTML) {
      var begin = pList.outerHTML.match(/(<select .*?>)/i);
      var end   = pList.outerHTML.match(/(<\/select>)/i);

      if (begin && end) {
        var s = begin[1] + pOptionHTML + end[1];
        pList.outerHTML = s;
      }
   }
  else {
    pList.innerHTML = pOptionHTML;
    }
  }
}

Angewendet wird sie dann so:

fillSelect(document.getElementById("combobox"), xmlHttp.responseText);

Und schon ist dieses Problem Geschichte :)

Weitere Informationen gibt es unter:
http://support.microsoft.com/kb/276228/de