2009-12-07 21 views
22

Gibt es eine gute Möglichkeit, ein jQuery-Objekt als reines HTML auszugeben?jQuery-Objekt als HTML ausgeben

ex:

<img src="example.jpg"> 

<script> 
var img = $('img').eq(0); 
console.log(img.toString()); 
</script> 

toString() nicht auf diese Weise arbeiten. Ich brauche die HTML-Äquivalent-String, dh:

<img src="example.jpg">

Antwort

6

Wenn Sie das Objekt im HTML-Format drucken möchten, verwenden Sie diese Erweiterung outerHTML oder dies outerHTML.

aktualisieren

Aktualisieren Sie den Link und schließen Sie den Code für die zweite Link:

$.fn.outerHTML = function(){ 

    // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning 
    return (!this.length) ? this : (this[0].outerHTML || (
     function(el){ 
      var div = document.createElement('div'); 
      div.appendChild(el.cloneNode(true)); 
      var contents = div.innerHTML; 
      div = null; 
      return contents; 
    })(this[0])); 

} 
+0

also, brauche ich wirklich eine Erweiterung dafür? Es funktioniert genauso wie Magnars Beispiel, außer dem Klonen vor dem Parsing. – David

+0

wenn die gleiche Sache, aber Sie müssen ihn klonen, um die Elemente im DOM zu bewegen, und sie entfernen dies. –

15

Man könnte es wickeln und dann verwenden html:

var img = $('img').eq(0); 
console.log(img.wrap("<span></span>").parent().html()); 
+0

funktioniert, aber sieht irgendwie peinlich aus ... gibt es einen besseren Weg? – David

+3

Wird das DOM nicht geändert? Sollten wir 'img' zuerst klonen? – Casebash

22

$('img')[0].outerHTML

werden Sie den HTML-Code der ersten img auf der Seite geben . Sie müssen dann eine for-Schleife verwenden, um den HTML-Code aller Bilder abzurufen, oder eine ID in das Bild einfügen und sie nur im jQuery-Selektor angeben.

+0

oder, wenn Sie das spezifische Element im DOM, das Sie wollten, das HTML für ... $ ('# einige .selector') [0] .outerHTML Nur sicher, es in ein if ($ (' #some .selector '). Länge) – bmarti44

Verwandte Themen