mit "getElementByTagName" Textabsatz ändern

[molily]

Hallo,

function aendern
{
      document.getElementByTagName("p")[0].firstChild.data = "neuer Text";
}

Die Methode heißt getElementsByTagName(), bezieht sich also auf die prinzipielle Ansprache mehrerer Elemente, deshalb "Elements". Gibt es nur ein Element, dann liefert die Methode auch nur ein Member im Ergebnis-Objektarray.

Dann bietet sich wohl getElementById (http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id) an:

function aendern () {
 document.getElementById('meinabsatz').firstChild.data = 'neuer Text';
}

<p id="meinabsatz" onclick="aendern()">klick mich</p>

Wenn mit einem Link gearbeitet wird, wäre es komplizierter:

<p id="meinabsatz"><a href="javascript:aendern()">klick mich</a></p>

Der erste Kindknoten des p-Elements ist dann nämlich kein Textknoten mehr, sondern ein Elementknoten (a-Element). Der kann nicht über data geändert werden, weil data nur für Textknoten gilt. Somit müsste man den kompletten a-Knoten mitsamt dem Kindknoten »klick mich« durch den neuen Text ersetzen. Das ginge über http://selfhtml.teamone.de/javascript/objekte/node.htm#replace_child:

var textknoten = document.createTextNode('neuer Text');
 document.getElementById('meinabsatz').replaceChild(textknoten, document.getElementById('meinabsatz').firstChild);

Aber es bietet sich der Einfachheit halber innerHTML (http://selfhtml.teamone.de/javascript/objekte/all.htm#inner_html) an:

document.getElementById('meinabsatz').innerHTML = 'neuer Text';

Das ist zwar nicht DOM-standardisiert, wird aber mittlerweile relativ breit unterstützt. (Näherliegend wäre innerText, das kann Mozilla aber nicht.)

Die leeren Klammern () nach function aendern sind übrigens notwendig, selbst wenn die Funktion keine Parameter entgegennimmt (von Möglichkeiten wie »arguments« einmal abgesehen).

Mathias