Wie bekomme ich das Markup eines Elements, einschließlich sich selbst mit jQuery?

Question

Ich weiß, ich kann es .html() in einem Tag wickeln, aber das Element selbst hat eine dynamisch gesetzte ID, Klasse, etc. Wie bekomme ich jQuery das Element Markup einschließlich sich selbst zurückzugeben?

Answer 1

Soweit ich weiß, gibt es keine „Outerhtml“ Unterstützung direkt in jQuery, aber Sie können eine Funktion schreiben, ihn nachzuahmen (in anderen Browsern als IE) oder this plugin verwenden:

// this will return the element and it's mark-up, of an element 
// with the id myTag 
var outer = $('#myTag').outerHTML(); 

Offensichtlich Brandon ist nicht die einzige Implementierung .. ich bin sicher, dass Sie auch mit anderen klugen Implementierungen kommen konnte ..

EDIT

Wenn Sie auf die Vermeidung der Anrufe scharf sind anhängen, vielleicht haben Sie so etwas wie dies versuchen könnte ..

function getOuterHTML(el) 
{ 
    var wrapper = ''; 

    if(el) 
    { 
     var inner = el.innerHTML; 
     var wrapper = '<' + el.tagName; 

     for(var i = 0; i < el.attributes.length; i++) 
     { 
      wrapper += ' ' + el.attributes[i].nodeName + '="'; 
      wrapper += el.attributes[i].nodeValue + '"'; 
     } 
     wrapper += '>' + inner + '</' + el.tagName + '>'; 
    } 
    return wrapper; 
} 


// now, to replicate the sample above 
var outer = getOuterHTML($('#myTag')); 

Die einzige Sache ist, ich bin nicht sicher, ob alle Browser die Attribute Array unterstützen .. aber ich weiß, dass die mozilla-Familie diejenigen tun, und IE hat native Unterstützung für Outerhtml .. Probieren Sie es aus (für diejenigen, die das Attributfeld nicht unterstützen, könnten Sie die vorherige Methode verwenden, die anfügt)

Answer 2

This blog post könnte Ihnen helfen.

Er beschreibt eine Technik, die wie folgt aussieht:

var html = $('<div>').append($('#top').clone()).remove().html() 

Das die div von Interesse klont, hängt es an einem Wrapper-div und bekommt dann den HTML-Code der Wrapper - die mit dem ursprünglichen HTML entspricht der der erste div.

Sein Vorschlag, es zunächst nur in einem deklarierten Wrapper Div zu umgeben, scheint jedoch ein besserer Weg zu sein. Dann müssten Sie sich nicht mit all dem beschäftigen.

Answer 3

Ohne Code, wählen Sie das Element, wählen Sie das erste innere Element, erhalten Sie seine Eltern (die Sie wollen) dann wickeln Sie es um die ursprüngliche Auswahl von youElement.html().

Answer 4

Uhm, brauchen Sie nicht ein Plugin zu verwenden, ich bin sicher, dass Sie

// this uses the jquery selectors, then returns the DOM element, 
// which then u can use the standard outterHTML... 
$('#myelement').get(0).outerHTML; 

bearbeiten versuchen können: Wenn Ihre Jquery Selektoren sind mehr als ein Element übereinstimmt, können Sie durch sie Schleife finden zu dem jquery docs für Beispiele

Answer 5

Das wird gut funktionieren:

jQuery.fn.outer = function() { 
    return $($('<div></div>').html(this.clone())).html(); 
} 

Answer 6

wenig spät auf diese Frage. Wenn Sie jQuery verwenden, um ein Objekt zu finden, können Sie den folgenden Code verwenden, um das outerHTML zu erhalten.

HTML:

<div class="obj"> 
    <a href="#" class="link">Link</a> 
</div> 

jQuery:

var $obj = $('.obj .link'); 
var outerHTML = $obj[0].outerHTML; 

Das wird ausgegeben <a href="#" class="link">Link</a>. Getestet auf Neueste Chrome, Neueste Firefox und IE11.Hier ist ein Link zu einem Codepen: http://codepen.io/aj372/pen/ZLmYbj