JavaScript: Return innerHTML inclusive of the tag you're targeting?

user_15447026 0
Viewed 128

New to JS. I was unable to find an answer to this in the Stacks, so I hope it's not a repeat. I'm trying to return the innerHTML of a tag, inclusive of the tag I'm targeting. Let's say you have this HTML:

<div class="parent">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
</div>

And this JS:

const divInner = document.querySelector('.parent').innerHTML
console.log(divInner)

The console log will return only the html inside of the div tags:

  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>

Is there a way to return the innerHTML INCLUSIVE of the parent tag (the div), so that the console log returns this entire section, without creating another parent container outside of the div?:

<div class="parent">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
</div>

I know I can do this if I just add another parent div outside the inner div and target the parent div's innerHTML instead, but I'm trying to apply this on a page where adding more divs will screw up the alignment / spacing and I don't wish to readjust it all over again if I can avoid it.

innerhtml javascript
1 Answers

Yes, you can do it using outerHTML.

The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.

const divInner = document.querySelector('.parent').outerHTML;
console.log(divInner);
<div class="parent">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
</div>

user_135734440
Related