• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / HTML / innerHTML vs outerHTML

innerHTML vs outerHTML

August 7, 2022 Leave a Comment

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.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Check if Variable Exists
  • 2.  How to Remove Decimals of a Number in JavaScript
  • 3.  Using JavaScript to Check if String Contains Only Letters
  • 4.  Using JavaScript to Get the Host URL
  • 5.  Using JavaScript to Square a Number
  • 6.  Using JavaScript to Get the Last Day of the Month
  • 7.  Using JavaScript to Check If String is a Number
  • 8.  Using JavaScript to Check If String Contains Only Certain Characters
  • 9.  Using JavaScript to Change the Font Size of a Paragraph
  • 10.  Using JavaScript to Set Select to the First Option

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy