get opening tag including attributes - outerHTML without innerHTML

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.

Barbee

Just clone node with .clone(), then empty it with .html() and remove id and what else you want. – Interested

$("a").clone().empty().attr("outerHTML"); To solve first problem – Smashing

Thanks @kirilloid, guess josh was just quicker ;) – Barbee

Thanks also @UlhasTuscano, should work great in conjunction with some outerHTML workarounds, e.g. #2420249 – Barbee

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').

Mathamathe

Amazing. Thanks very much, josh :) Any concerns about using .clone()? Some say it may not be that performant, but I cannot see any other solution. – Barbee

i guess .clone() isn'e exactly copy the whole object and some sort of reference do exists and if we use .remove() to the cloned object, it actually removes the original object. I suffer this issue once. – Kattegat

@RichardKiefer: Performance is obviously browser-dependent, but this code ranges from 3,000 ops/sec in IE8 to 25,000 ops/sec in FF10. You probably shouldn't be generating thousands of DOM elements anyway, so I don't see anything to worry about. – Mathamathe

Answer 2

There is a way to do this without jQuery. This also works with <br> tags, <meta> tags, and other empty tags:

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

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

Gerstner

This doesn't work with empty elements: document.createElement("strong").outerHTML.slice(0, elem.outerHTML.indexOf(elem.innerHTML)) – Laze

@Laze put your createElement declaration in a variable called elem and use the ternary expression I used above, it returns <strong></strong>. – Gerstner

@AaronGillion Good catch. That one could be remedied by searching for >< if innerHTML is an empty string. This makes me think of another issue, though: <span id="space"> </span> identifies the wrong index for the space. – Scaife

This is very UNSAFE. E. g. when elem.outerHTML === '<p>p</p>'. Or any other situation that innerHTML's text is a subset of tagName or one of its attributes or even attributes' values! – Lindsey

as another comment said: very Unsafe -- if multiple other text has the same content of innerHtml... otherwise (if you dont care that, and dont care empty tags), wouldnt split() be a lot easier?... – Romain

Answer 3

If someone is not using jQuery . . .

elem.outerHTML
"<a href="#" class="class">
  link text
</a>"
elem.cloneNode().outerHTML
"<a href="#" class="class"></a>"

If you want to be safe for Firefox etc. released before mid-2014, use cloneNode(false) to avoid getting inner stuff.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

Schaab

This is the correct answer. All the other distracting answers should be deleted. – Biostatics

Answer 4

Here is my solution:

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

I suppose, that close tag is of the form: "</"+elem.tagName+">".

Lelalelah

Answer 5

Unfortunately, @AaronGillion's answer isn't reliable as I said in my comment. Thank @sus. I recommend his/her way 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's always `</${tagName}>`. Correct?
    
    return outerHtml.slice(0, openTagLength);
}

^{The code is in TypeScript. Remove types (HTMLElement and number) if you want JavaScript.}

Lindsey

Answer 6

Here's a solution I've used:

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

Ramin

Answer 7

This can be done without any String manipulation.

Instead, you can use the element's internals and build the string yourself from there:

function getTagHTML(el) {
  if (!el instanceof HTMLElement) return null;
  let result = `<${el.tagName.toLowerCase()}`;
  for (const attribute in el.attributes) {
    if (el.attributes[attribute].nodeValue) 
      result += ` ${el.attributes[attribute].name}="${el.attributes[attribute].nodeValue.replace(/"/g, "&quot;")}"`
  }
  result += `></${el.tagName.toLowerCase()}>`;
  return result;
}

console.log(getTagHTML(document.getElementById('outer')));

<div id="outer" class='i-want-"this"'>
  <span>I do not want this</span>
</div>

Please note that for self-closing elements like <img /> this would give you an unwanted and incorrect closing tag. Feel free to adjust the code accordingly.

Gleeful

Answer 8

+1 for cloneNode answer above

• create HTML without content
• Looping over attributes
• optional end tag
• optional self-closing tag

function getTagHTML(el, includeClosingTag=true , selfClosing = false) {
  //return el.cloneNode(false).outerHTML;
  if (el.attributes)
    return `<${el.localName}` + 
      [...el.attributes].map(
             attr => ` ${attr.name}="${attr.nodeValue.replace(/"/g, "&quot;")}"`
      ).join`` +
      `${selfClosing ? "/" : ""}>` + 
      (!selfClosing && includeClosingTag ? `</${el.localName}>` : "");
  else 
    return null;
}

document.body.querySelectorAll("*:not(script)").forEach(el=>{
  console.log(getTagHTML(el));
  console.log(getTagHTML(el,false));
  console.log(getTagHTML(el,false,true))
});

<div id="ONE" class='CLASSNAMES' attr1='"string"'>
   INNERHTML
  </div>
  <img id="TWO" src="https://svgshare.com/i/Uhq.svg"/>

Narco

Answer 9

My solution using Reg Exp to replace all possible closing tags inside element attributes:

const outerHTML = div.outerHTML;
const content = outerHTML.slice(0, outerHTML.length - div.innerHTML.length);
const dummy = content.replace(/'.*?'|".*?"/g, x => 'x'.repeat(x.length));
return content.slice(0, 1 + dummy.indexOf('>'));

Convivial