Javascript element html without children [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 9 years ago.

Improve this 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
– Boris Strandjev, Commented Jun 10, 2016 at 15:31

Azamantes · Accepted Answer · 2016-06-10 15:51:56Z

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, 2016 at 15:51

answered Jun 10, 2016 at 15:32

Azamantes

1,46110 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Boris Strandjev Over a year ago

In what you write what is the relation between parent and copy?

Azamantes Over a year ago

I missed 1 line, updated my answer.

Azamantes Over a year ago

Updated my answer with 2-liner, I cannot think of any better way. No node cloning, no new parent, one simple replace.

Boris Strandjev Over a year ago

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

I wrestled a bear once. · Accepted Answer · 2016-06-10 15:47:12Z

3

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, 2016 at 15:47

answered Jun 10, 2016 at 15:42

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

4 Comments

Boris Strandjev Over a year ago

i believe this would not modify the dom, right?

I wrestled a bear once. Over a year ago

@BorisStrandjev - correct.

I wrestled a bear once. Over a year ago

@Azamantes - thank you, good catch

i-know-nothing Over a year ago

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.

Yerko Palma · Accepted Answer · 2016-06-10 15:46:44Z

2

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, 2016 at 15:46

Yerko Palma

12.4k5 gold badges37 silver badges59 bronze badges

2 Comments

Boris Strandjev Over a year ago

thanks for the suggestion - for the moment, after seeing the others' suggestions I think this is more optimal

Yerko Palma Over a year ago

I'm glad it helps :)

Dan_ · Accepted Answer · 2016-06-10 15:54:38Z

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, 2016 at 15:54

answered Jun 10, 2016 at 15:47

Dan_

1,24511 silver badges21 bronze badges

1 Comment

Mogsdad Over a year ago

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.

Collectives™ on Stack Overflow

Javascript element html without children [closed]

4 Answers 4

4 Comments

4 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

2 Comments

1 Comment

Linked

Related