Lisa: removeChild und Firefox

Hallo Leute,

ich möchte im DOM-Baum ein div-Element das Text enthält per "klick" durch ein anderes div-Element ersetzten. Im IE funktioniert das auch, jedoch im Firefox passiert nichts. Im Folgenden kommt ein kleines Beispiel. Ich hoffe ein Spezialist unter euch kann mir sagen an was es liegt.

<script language="JavaScript1.2" type="text/javascript">

function changeImages (text_neu) {
  var Textknoten = document.getElementById(text_neu).firstChild.cloneNode(true);
  document.getElementById("div_anzeige_text").replaceChild(Textknoten,document.getElementById("div_anzeige_text").firstChild);
}
</script>
</head>

<body>
<div id="div_anzeige_text" style="position:absolute; top: 194px; left:456px; width:375px; height: 358px; background-color:#7974F7;">
  <div>
    <h1> Text zu Beginn</h1>
    <h2>Dieser Text soll bei "klick" ersetzt werden...</h2>
  </div>
</div>

<a href="#" target="frame_anzeige_bild" onClick="changeImages('text_eins')">
    zu Text eins<br>
  </a>

<a href="#"  onClick="changeImages('text_zwei')">
 zu Text zwei
  </a>

<div id="text_eins" >
 <div style="position:absolute; top: 200px;">
  <h1>Ausführlicher Text eins</h1><br>
  <h2>Text...</h2>
 </div>
</div>

<div id="text_zwei" style="position:absolute; top: 210px;">
 <div>
  <h1>Ausführlicher Text zwei</h1><br>
  <h2>Text...</h2>
 </div>
</div>

</body>

</html>

Grüße
Lisa

  1. Das Problem hatte ich auch einmal und habe es folgendermaßen etwas unsauber gelöst. Für deine Zwecke:

    function changeImages (text_neu) {
      var Textknoten = document.getElementById(text_neu).firstChild.cloneNode(true);
    document.getElementById("div_anzeige_text").innerHTML='';
    document.getElementById("div_anzeige_text").addChild(Textknoten);
    }

    Damit kann man sich behelfen.
    Grüße,
    Rafael

    1. Hallo Rafael,

      danke für den Ratschlag. Wenn ich deine Funktion übernehme klappt es leider auch nicht so richtig. Bei klick auf einen Link verschwindet zwar der Anfangstext (im div), aber der neue Text erscheint nicht in dem div (weder beim IE noch beim FF).

      Gruß Lisa

  2. Hi,

    function changeImages (text_neu) {
      var Textknoten = document.getElementById(text_neu).firstChild.cloneNode(true);

    <div id="text_eins" >
    <div style="position:absolute; top: 200px;">

    <a href="#" target="frame_anzeige_bild" onClick="changeImages('text_eins')">

    Es soll also das erste Kind vom div mit der id 'text_eins' geklont werden.
    Damit erhältst Du eine Kopie des Whitespace, der zwischen 'id="text_eins" >' und '<div style="position:' befindet.

    document.getElementById("div_anzeige_text").replaceChild(Textknoten,document.getElementById("div_anzeige_text").firstChild);

    sorgt dann dafür, daß der Whitespace zwischen 'background-color:#7974F7;">' und '<div>' durch die oben angelegte Kopie des Whitespaces ersetzt wird.

    Daß das keine _sichtbaren_ Auswirkungen hat, kommt daher, daß in HTML in den meisten Fällen die Menge von Whitespace irrelevant ist, solange es mehr als 1 Zeichen ist.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi Andreas,

      das war ein super Tipp, nachdem ich die whitespaces vermieden habe klappts. Da wär ich im Leben nicht draufgekommen!
      Zur Zeit hab ich öfters Probleme mit der unterschiedlichen Reaktion von IE und FF. Gibts da eine gute Seite, wo man schnell Hilfe bei Problemen dieser Art findet??

      Nochmals Danke und viele Grüße
      Lisa