outerHTML, aber bitte Cross-Browser

[Thorsten]

Hi ihr alle,

ich suche jetzt schon ne ganze Weile im Netz nach ner Möglichkeit, wie ich ne eigene outerHTML-Methode hinbekomme, die in jedem Browser funktioniert.

Hat da jemand schon was gemacht?

Gruß,
Thorsten

[Christoph Schnauß]

hallo,

ich suche jetzt schon ne ganze Weile im Netz nach ner Möglichkeit, wie ich ne eigene outerHTML-Methode hinbekomme, die in jedem Browser funktioniert.

Du wirst derzeit nichts Zuverlässiges finden. outerHTML gehört zu den Eigenschaften des Objekts all, die nicht von allen Browsern unterstützt werden. Bitte auch Das all-Objekt nachlesen.

Grüße aus Berlin

Christoph S.

[wahsaga]

hi,

ich suche jetzt schon ne ganze Weile im Netz nach ner Möglichkeit, wie ich ne eigene outerHTML-Methode hinbekomme, die in jedem Browser funktioniert.

Habe sowas erst kürzlich selber mal gebraucht.
Allerdings nur für ein bestimmtes Element in einem Dokument, wo ich also alle "Umgebungsbedingungen" unter Kontrolle hatte.
Die Allgemeintauglichkeit der folgenden Möglichkeit bezweifle ich (warum, siehe unten).

outerHTML von X dürfte gleich innerHTML von Y sein, wenn Y X umschließt, und sonst nichts weiter enthält.

Da so ein Y nicht immer vorhanden ist, müsste es ggf. erzeugt werden.
Je nach Art von X müsste dabei darauf geachtet werden, welches Element für Y erlaubt ist - für ein Block Element könnte Y ein Div sein, für ein Inline Element ein Span (ggf. auch ein Div, wenn X an einer Stelle steht, wo auch Block erlaubt wäre). Welche weiteren Besonderheiten es ggf. zu betrachten gibt, wäre noch zu ermitteln - bspw. um eine TD oder TR können wir weder Div noch Span so einfach drumherumlegen.

Wenn aber Div oder Span um das Element herum erlaubt wäre (und wir bspw. anhand des nodeNames geprüft haben, welches von beiden brauchbar wäre), dann erzeugen wir uns solch ein Y (createElement), fügen es vor X ein (insertBefore), und hängen dann X in Y um (appendChild).

Y.innerHTML sollte jetzt etwas liefern bzw. setzen, was X.outerHTML entspricht.

Natürlich dürfte die Tauglichkeit so eines Vorgehens vom Einzelfall abhängen - wenn durch das Einfügen von Y CSS-Selektoren ungültig werden, oder plötzlich andere Selektoren greifen, kommt man damit ziemlich ins Schwimmen ...

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

outerHTML von X dürfte gleich innerHTML von Y sein, wenn Y X umschließt, und sonst nichts weiter enthält.

müsste dann x.outerHTML nicht das selbe sein, wie x.parentNode.innnerHTML? Weitere Elemente im Elternknoten müssten dann evtl. noch identifiziert werden.

Gruß, Jürgen

[wahsaga]

hi,

outerHTML von X dürfte gleich innerHTML von Y sein, wenn Y X umschließt, und sonst nichts weiter enthält.

müsste dann x.outerHTML nicht das selbe sein, wie x.parentNode.innnerHTML?

Ja, sicher - weil Y der parentNode von X ist :-)

Weitere Elemente im Elternknoten müssten dann evtl. noch identifiziert werden.

Ja, und das halte ich für problematisch - wie würdest du das machen wollen, Stringfunktionen/reguläre Ausdrücke drauf loslassen?

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

Weitere Elemente im Elternknoten müssten dann evtl. noch identifiziert werden.

Ja, und das halte ich für problematisch - wie würdest du das machen wollen, Stringfunktionen/reguläre Ausdrücke drauf loslassen?

kann man sich nicht die Referenz auf die Knoten besorgen (getElement..., childNodes, etc.) und mit der Referenz auf den Knoten, um den es geht, vergleichen? Also so etwas wie: (x == x.parentNode.childNodes[i])? So etwas habe ich allerdings noch nicht ausprobiert.

Gruß, Jürgen

[wahsaga]

hi,

kann man sich nicht die Referenz auf die Knoten besorgen (getElement..., childNodes, etc.) und mit der Referenz auf den Knoten, um den es geht, vergleichen? Also so etwas wie: (x == x.parentNode.childNodes[i])?

Was nützt das?

Wir wollen outerHTML von X haben, und wollen dies über innerHTML des parentNodes emulieren.

<Y>
  <A>
  <B>
  <X>
<Y>

parentNode von X ist hier Y, also ist X.parentNode.innerHTML gleich "<A><B><C>" (ggf. noch mit whitespaces dazwischen).

A und B verschwinden ja nicht aus diesem Y.

Deshalb ja mein Vorschlag, ein neues Element zu erzeugen, welches sich nur um X "drumlegt", damit dessen innerHTML auch nur "<x>...</x>" liefert.

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

Was nützt das?

der DOM-Baum

Deshalb ja mein Vorschlag, ein neues Element zu erzeugen, welches sich nur um X "drumlegt", damit dessen innerHTML auch nur "<x>...</x>" liefert.

müsste nicht verändert werden, die sich daraus ergebenden Probleme hast Du ja schon erwähnt.

Gruß, Jürgen

[svg4you]

Tach Thorsten,

ich suche jetzt schon ne ganze Weile im Netz nach ner Möglichkeit, wie ich ne eigene outerHTML-Methode hinbekomme, die in jedem Browser funktioniert.

Versuch mit XMLSerializer():

  
if(!document.documentElement.outerHTML && window.XMLSerializer)window.onload=function()  
{  
  var elem=document.getElementsByTagName("*");  
  var anz=elem.length;  
  for(var i=0; i<anz; i++)  
  if(elem.item(i).nodeType==1)elem.item(i).outerHTML=new XMLSerializer().serializeToString(elem.item(i));  
}

Test:

  
<p id="bla" onclick="alert(this.outerHTML)">Text1 <strong>Text2</strong> Text3</p>

Mit aktuellen Firefox- und Opera-Versionen scheint das zu funktionieren, die IEs haben outerHTML ja nativ drin.

Man liest sich,
svg4you

[Mathias Brodala]

Hallo svg4you.

ich suche jetzt schon ne ganze Weile im Netz nach ner Möglichkeit, wie ich ne eigene outerHTML-Methode hinbekomme, die in jedem Browser funktioniert.

Versuch mit XMLSerializer():

Mit allen Einschränkungen.

Mit aktuellen Firefox- und Opera-Versionen scheint das zu funktionieren, die IEs haben outerHTML ja nativ drin.

Opera auch.

Einen schönen Donnerstag noch.

Gruß, Mathias

[Thorsten]

Hi ihr alle,

dane für die Beiträge. Mein aktueller Code, den ich mit Hilfe des Internet zusammengebaut hab sieht so aus:

function replaceComponentHtml(id, html) {
    var component = document.getElementById(id);
    if (component == null) return;

if (typeof component.outerHTML != 'undefined') {
        component.outerHTML = html;
    } else {
        var parent = component.parentNode;
        if (parent == null) return;

var nrOfChildElements = 0;
        var lastChildElementTag = null;
        for (var i = 0; i < parent.childNodes.length; i++) {
            if (parent.childNodes[i].nodeType == 1) {
                nrOfChildElements++;
                lastChildElementTag = parent.childNodes[i].tagName;
            }
        }

if (nrOfChildElements == 1) {
            parent.innerHTML = html;
        } else {
            var range;
            if (document.createRange && (range = document.createRange()) &&
                range.createContextualFragment) {
                range.selectNode(component);
                var docFrag = range.createContextualFragment(html);
                parent.replaceChild(docFrag, component);
            }
        }
    }
}

Könntet ihr mal drüberschauen?

Danke,
Thorsten