Javascript element html without children

Question

In my javascript code I need to get the definition of an element, but without its content - neither text nor children.

E.g. for:

<div id="my_example_id" class="ShinyClass">
   My important text
   <span> Here</span>
</div>

I would like to write a javascript fucntion that when provided with the element of the div above will return the following as string:

<div id="my_example_id" class="ShinyClass">

I have been trying with different manipulations over the elements, functions like innerHTML, outerHTML and similar, but I was unable to figure out how to fetch only the part I am interested in. Is substring until the first > the best possible solution?

EDIT: selecting the element is not part of the question - I know how to do that, no prob. Rather the question is: when I have already selected a particular element how to parse as string only its own definition.

@Tushar Thanks for the constructive feedback - I added some more thoughts, not code per se, just because I am not sure how to start on that — Boris Strandjev, Jun 10 '16 at 15:31
http://stackoverflow.com/questions/1763479/how-to-get-the-html-for-a-dom-element-in-javascript — pishpish, Jun 10 '16 at 15:33
oneliner `document.getElementById('my_example_id').cloneNode().outerHTML.replace(/<\/.*/, "")` — Madacol, Mar 25 '22 at 18:35

Azamantes · Answer 1 · 2016-06-10T15:51:56.433

8

UPDATE:

const div = document.getElementById('my_example_id'); // get the node
const html = div.outerHTML.replace(div.innerHTML || '', ''); // simple set logic

console.log(html);

Just some way to do this, not saying the best.

const div = document.getElementById('my_example_id');
const copy = div.cloneNode(true);
const parent = document.createElement('div');
copy.innerHTML = '';
parent.appendChild(copy); // I forgot to add this line.
const html = parent.innerHTML;

console.log(html);

Basically you create a copy of the div, create a parent, then remove innerHTML of the copied node to leave out just the 'div' itself. Append the copied node to the new parent and show the parent's innerHTML which is just the 'div' you wanted.

edited Jun 10 '16 at 15:51

answered Jun 10 '16 at 15:32

Azamantes

1,435
10
15

In what you write what is the relation between `parent` and `copy`? – Boris Strandjev Jun 10 '16 at 15:43
I missed 1 line, updated my answer. – Azamantes Jun 10 '16 at 15:45
Updated my answer with 2-liner, I cannot think of any better way. No node cloning, no new parent, one simple `replace`. – Azamantes Jun 10 '16 at 15:56
Thanks for the effort - you are already upvoted for them. Still I prefer a bit the solutions concentrating on '>' as they will be a bit more effective, espectially for heavy DOMs I think – Boris Strandjev Jun 10 '16 at 16:02

I wrestled a bear once. · Answer 2 · 2016-06-10T15:47:12.393

2

you don't need to do all that fancy stuff copying it to a parent..

// make a copy of the element
var clone = document.getElementById('my_example_id').cloneNode(true);
// empty all the contents of the copy
clone.innerHTML = "";
// get the outer html of the copy
var definition = clone.outerHTML;

console.log(definition);

I threw it in a function in this fiddle: https://jsfiddle.net/vtgx3790/1/

edited Jun 10 '16 at 15:47

answered Jun 10 '16 at 15:42

I wrestled a bear once.

22,983
19
69
116

i believe this would not modify the dom, right? – Boris Strandjev Jun 10 '16 at 15:46
@BorisStrandjev - correct. – I wrestled a bear once. Jun 10 '16 at 15:46
@Azamantes - thank you, good catch – I wrestled a bear once. Jun 10 '16 at 15:47
3

If you use `.cloneNode(false)` or just `.cloneNode()` (the default is false), you'll get a clone of the element without any children. You don't have to manually empty the innerHTML then. – i-know-nothing May 08 '20 at 19:07

score 1 · Accepted Answer · answered Jun 10 '16 at 15:46

1

I guess that a Regex is what you need. Check if this works for you

function getHtml(selector) {
  var element = document.querySelector(selector)
  var htmlText = element.outerHTML
  var start  = htmlText.search(/</)
  var end  = htmlText.search(/>/)
  return htmlText.substr(start, end + 1)
}
alert(getHtml('.ShinyClass'))

example here

answered Jun 10 '16 at 15:46

Yerko Palma

12,041
5
33
57

1

thanks for the suggestion - for the moment, after seeing the others' suggestions I think this is more optimal – Boris Strandjev Jun 10 '16 at 15:48
I'm glad it helps :) – Yerko Palma Jun 10 '16 at 15:49

Dan_ · Answer 4 · 2016-06-10T15:54:38.307

1

console.log(getElementTag("my_example_id"));

function getElementTag(myElementId) {
  var FullEelementObject = document.getElementById(myElementId);
  var FullElementText = FullEelementObject.outerHTML;
  var regExTag = new RegExp(/(<).*(>)/i);

  openingTag = FullElementText.match(regExTag);

  return openingTag[0];
}

Just threw together this JSFiddle, it gets the outerHTML of the element you pass the function, the regExp to get the full opening tag.

Edit: Here is the JSFiddle

edited Jun 10 '16 at 15:54

answered Jun 10 '16 at 15:47

Dan_

1,235
11
20

No need to add a comment on the question saying you added an answer... we can see the answer. Plus, the OP gets notified of answers. – Mogsdad Jun 10 '16 at 21:36

Javascript element html without children

4 Answers4

Linked