Get opening tag, including attributes - outerHTML without innerHTML

Question

I would like to get a specific 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 closing </a> , either as a string, or some other object. In my opinion, this would be like extracting .outerHTML without .innerHTML .

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

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

but .get() returns a DOM element, including its contents. Also

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

does not work, because elem.attributes returns a NamedNodeMap that does not work with jQuery attr() , and I could not convert it. It was accepted that the above examples are not very clear, since they also copy the no-long-unique ID element. But is there an easy way? Many thanks.

Answer 1

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

• You might want to change the selector to more closely match the <a> element you are looking for.
• clone() creates a new copy of the corresponding elements, and also copies event handlers.
• I used attr to clear the identifier of the element so that we do not duplicate identifiers.
• empty() removes all child nodes (' innerHTML ').

Answer 2

For future Googlers, there is a way to do this without jQuery:

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

Since outerHTML contains an opening tag, followed by a mirror of what innerHTML contains, we can fine-tune outerHTML from 0 (the beginning of the open tag) to where innerHTML starts (the end of the open tag), and since innerHTML is a mirror of outerHTML, except for the open tag , there will be only an opening tag!

This file works with <br> tags, <meta> tags, and other empty tags:

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

Since innerHTML will be empty in self-closing tags, and indexOf('') always returns 0, the above modification first checks for innerHTML .

Answer 3

Here is my solution:

 opentag=elem.outerHTML.slice(0, elem.outerHTML.length-elem.innerHTML.length-elem.tagName.length-3); 

I assume that the closing tag has the form: "</"+elem.tagName+">" .

Answer 4

Unfortunately, @AaronGillion's answer is not reliable, as I said in the comment . Thanks @sus . I recommend his / her path with a little change to support <self-closing tags/> :

 function getOpenTag(element: HTMLElement): string { const outerHtml = element.outerHTML; const len = outerHtml.length; const openTagLength = outerHtml[len - 2] === '/' ? // Is self-closing tag? len : len - element.innerHTML.length - (element.tagName.length + 3); // As @sus said, (element.tagName.length + 3) is the length of closing tag. It always '</${tagName}>'. Correct? return outerHtml.slice(0, openTagLength); } 

^{Typescript code. Remove the types ( HTMLElement and number ) if you want pure Javascript.}

Answer 5

Here is the solution I used:

 const wrap = document.createElement('div') wrap.appendChild(target.cloneNode(true)) const openingTag = wrap.innerHTML.split('>')[0] + '>'