Anzeige von Code statt von Bild

[_mil28]

Hi,
ich möchte den Inhalt eines DIVs ändern, klappt auch, aber statt Bild zeigt der Browser mir Code an.

Ein PHP-Script liefert mir als Ergebnis:

$new =     '<img src="../images/thumbs/thumb_'.$value['movie_title'].'.png" border="0" />';
    
echo $new; 

JS greift den Response auf und soll mittels Funktion replaceText jetzt eigentlich nur alten Inhalt eines DIVs gegen den neuen aus dem PHP- Script austauschen.

Zunächst meine Callback Funktion:

function updatePage() {

	if(request.readyState == 4) {
	
		var newData = request.responseText;
		var oldData = document.getElementById("nowplaying");

		replaceText(oldData, newData);
	
	}

}

Dann die Replace Funktion:

function replaceText(el, text) {

	if (el != null) {
	
		clearText(el);
		var newNode = document.createTextNode(text);
		el.appendChild(newNode);
	
	}

}

Hier noch die clearText Funktion:

function clearText(el) {

	if (el != null) {
	
		if (el.childNodes) {
		
			for (var i = 0; i < el.childNodes.length; i++) {
			
				var childNode = el.childNodes[i];
				el.removeChild(childNode);
			
			}
		
		}
	
	}

}

Austausch funktioniert einwandfrei, er zeigt mir aber das IMG Tag an und nicht das Bild - es soll natürlich umgekehrt sein! Ich möchte gerne das Bild sehen.

Das alte DIV sieht so aus:

<div id="nowplaying">

    Nothing plays... :-(

</div> 

Das neue soll dementsprechend so aussehen:

<div id="nowplaying">

    <img src="../images/thumbs/thumb_rambo.png" border="0" />

</div> 

Kann das am nodeType liegen?
Weiss jemand Rat, 1000 Dank, Marc

[prego]

Hi,

du erstellst auch einen neuen "TextNode" (document.createTextNode(text)) - demzufolge wird das was du in dein "div" reinschreibst als Text behandeltm nicht als HTML.

Die Funktion die du erwartest funktioniert nur über innerHTML. innerHTML ist nicht standardisiert, auch wenn es im Normalfall jeder Browser unterstützt. Der IE, der es eingeführt hat, kann zB auf mit innerHTML eingefügte Elemente nachträglich keine StyleSheets mehr anwenden.

Der richtige Weg ist, wenn du schon das DOM benutzt, auch ein IMG-Object und kein Textobject zu erzeugen...

var newNode = document.createElement("img");
newNode.src = img_src;
el.appendChild(newNode);

[wahsaga]

Original geschrieben von prego
Der IE, der es eingeführt hat, kann zB auf mit innerHTML eingefügte Elemente nachträglich keine StyleSheets mehr anwenden.

Das wäre mir neu.

Wie meinst du "nachträglich"?
Gibt's dazu was zum nachlesen, oder ein Beispiel?

[prego]

nachträglich ist evtl etwas schwammig erklärt.

Ich stelle aber gerade fest, das wenn ich ein Beispiel programmiere der IE6 und der IE7 tadellos Styles auf per innerHTML eingefügte Elemente anwenden....
Scheint so als hätte ich damals noch was anderes im Argen gehabt.

Fakt ist aber, das der IE mit setAttribute nicht ordentlich umgehen kann. Daher immer direkt die Eigenschaften des Objekts nutzen. Bsp:

var foo = document.createElement('img');
foo.src = 'einbild.gif';


//DOM like
var foo = document.createElement('img');
foo.setAttribute('src', 'einbild.gif);

[_mil28]

Danke für den Hinweis,

läuft jetzt, wen es interessiert:

var element = document.getElementById('hierher'); //Hier soll die URL eingefügt werden

var url = "http://blablub.de";

var aNode = document.createElement('A'); //erzeugt ein A-Element
aNode.setAttribute("href",url); //link zuweisen
//alternativ: aNode.href=url;

var textNode = document.createTextNode('Hier der LinkText');

//und nun zusammenfügen
aNode.appendChild(textNode); //Text in Link einfügen

element.appendChild(aNode); Link in HTML-baum einfügen - jetzt erst wird gerendert 

... ganz schön viel Code für einen bescheuerten Link...