ottenere tag di apertura compresi gli attributi - outerHTML senza innerHTML

Question

Vorrei recuperare un determinato elemento tag con i suoi attributi dal DOM. Ad esempio, dal

<a href="#" class="class"> 
    link text 
</a> 

voglio ottenere <a href="#" class="class">, opzionalmente con una chiusura </a>, sia sotto forma di stringa o qualche altro oggetto. A mio parere, sarebbe simile al recupero dello .outerHTML senza lo .innerHTML.

Infine, ho bisogno di questo per racchiudere alcuni altri elementi tramite jQuery. Ho provato

var elem = $('#some-element').get(0); 
$('#some-other-element').wrap(elem); 

ma .get() restituisce l'elemento DOM incluso il suo contenuto. Anche

var elem = $('#some-element').get(0); 
$('#some-other-element').wrap(elem.tagName).parent().attr(elem.attributes); 

fallisce come elem.attributes restituisce un NamedNodeMap che non funziona con jQuery di attr() e non ero in grado di convertirlo. Ammesso che gli esempi di cui sopra non sono molto sensati poiché copiano anche l'ID non più univoco dell'elemento. Ma c'è un modo semplice? Molte grazie.

Answer 1

var wrapper = $('.class').clone().attr('id','').empty(); 

• si potrebbe desiderare di cambiare il selettore in modo che corrisponda più precisamente l'elemento <a> che stai cercando.
• clone() crea una nuova copia degli elementi corrispondenti, copiando facoltativamente anche i gestori di eventi.
• Ho utilizzato attr per cancellare l'ID dell'elemento in modo da non duplicare gli ID.
• empty() rimuove tutti i nodi figlio ('innerHTML').

Answer 2

Per i futuri Googler, c'è un modo per farlo senza jQuery:

tag = elem.outerHTML.slice(0, elem.outerHTML.indexOf(elem.innerHTML)); 

Dal outerHTML contiene il tag apertura seguita da uno specchio di ciò che innerHTML contiene, siamo in grado di sottostringa l'outerHTML da 0 (l'inizio del tag di apertura) a dove inizia innerHTML (fine del tag di apertura), e poiché innerHTML è un mirror di outerHTML, ad eccezione del tag di apertura, verrà lasciato solo il tag di apertura!

Questo funziona con <br> tag, <meta> tag e altri tag vuoti:

tag = elem.innerHTML ? elem.outerHTML.slice(0,elem.outerHTML.indexOf(elem.innerHTML)) : elem.outerHTML; 

Perché innerHTML sarebbe vuoto nei tag a chiusura automatica, e indexOf('') restituisce sempre 0, i controlli di modifica di cui sopra per la presenza di innerHTML prima.