How do I get tag as text in javascript, without using outerHTML?

Question

What I want is outerHTML without innerHTML.

I don't want to compute string of innerHTML, as it might be expensive and I've to do this operation frequently, is there a simple way to get it?

Can't you just use the DOM? Everything is available, assuming you use document.getElementById, then verify the return is an object and then dereference the returned node to get .parentNode . — SPlatten, Apr 09 '20 at 10:16

connexo · Answer 1 · 2020-04-09T10:35:44.760

1

You can use the elements' internals and build the string yourself from that:

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>

If the opening tag is enough, that's easy:

const tag = `${outer.outerHTML.split('>')[0]}>`;

console.log(tag);

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

Please note, that as pointed out by Quentin, the > cannot be relied upon to mark the end of the opening tag as it may very well occur within any attribute's value.

edited Apr 09 '20 at 10:35

answered Apr 09 '20 at 10:09

connexo

53,704
14
91
128

That's unreliable. You can't depend on the first `>` character being the end of the start tag. e.g.: https://jsbin.com/liqarigiju/1/edit?html,js,console – Quentin Apr 09 '20 at 10:14
That doesn't seem properly encoded. Wouldn't it have to be `3 > 2`? – connexo Apr 09 '20 at 10:16
No. `>` characters don't have special meaning inside an attribute value (at least if it is quoted) and don't need to be expressed as an entity. If the HTML was written with an entity, then you'd get the same result because the browser would normalize it when converting the DOM back to HTML via `outerHTML`. https://jsbin.com/tatuhutixa/1/edit?html,js,console – Quentin Apr 09 '20 at 10:18
@Quentin Thx for pointing out, will edit that into my post accordingly. Added a more robust way that won't rely on String parsing. – connexo Apr 09 '20 at 10:27
Re edit: `el.attributes[attribute].nodeValue` needs escaping. It might contain `"` characters. – Quentin Apr 09 '20 at 10:28
@Quentin what if those are escaped already using `\"`? – connexo Apr 09 '20 at 10:38
```\``` isn't an escape character in HTML – Quentin Apr 09 '20 at 10:42

score -1 · Answer 2 · answered Apr 09 '20 at 10:14

As far as I know there is no JavaScript "native" way to get the HTML Tag without its' content. How about using jQuery and

let oElement = $("#myElementsID");

or

let oElement = $(".myElementsClass");

That won't give you the HTML tag, but all the information that you could ask for in a neat object.

How do I get tag as text in javascript, without using outerHTML?

2 Answers2