Question

I would like to retrieve a certain tag element with its attributes from the DOM. For example, from

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

I want to get <a href="#" class="class">, optionally with a closing </a>, either as a string or some other object.
In my opinion, this would be similar to retrieving the .outerHTML without the .innerHTML.

Finally, I need this to wrap some other elements via jQuery. I tried

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

but .get() returns the DOM element including its content. Also

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

fails as elem.attributes returns a NamedNodeMap which does not work with jQuery’s attr() and I was not able to convert it.
Admitted that the above examples are not very senseful as they copy also the element’s no-longer-unique ID. But is there any easy way? Thanks alot.

Answer 1

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

• You might want to change the selector to more exactly match the <a> element you’re looking for.
• clone() creates a new copy of the matched element(s), optionally copying event handlers too.
• I used attr to clear the element’s ID so that we don’t duplicate IDs.
• empty() removes all child nodes (the ‘innerHTML‘).