innerHTML vs outerHTML

The main difference between innerHTML vs outerHTML is that the innerHTML property will get the HTML code that is inside of a div or element, while the outerHTML property will get the innerHTML plus the HTML code of the div or element itself. The best way to show the difference is with some simple examples.

Let’s quickly show the code of each using the JavaScript getElementById() method to target an element.

Here is how to get the innerHTML of an element:

document.getElementById("p1").innerHTML

And here is how to get the outerHTML of an element:

document.getElementById("p1").outerHTML

Let’s take a look at what both these properties get below:

Let’s say we have the following HTML:

<div id="div1">
  <p id="p1">This is our <span>first</span> paragraph with some text.<p>
  <p id="p2">This is our <span>second</span> paragraph with some text.<p>
  <p id="p3">This is our <span>third</span> paragraph with some text.<p>
</div>

If we want to get the innerHTML of the paragraph with id, #p1, we can use our code from above to do this.

console.log(document.getElementById("p1").innerHTML);

#Output
//This is our <span>first</span> paragraph with some text.

Now let’s take a look at what the outerHTML property would return using the same JavaScript code:

console.log(document.getElementById("p1").outerHTML);

#Output
//<p id="p1">This is our <span>first</span> paragraph with some text.</p>

As you can see, the outerHTML property will return the innerHTML of the element, plus its surrounding HTML as well.

Hopefully this article has been useful for you to understand the difference between innerHTML vs outerHTML.