EN
JavaScript - difference between innerHTML and outerHTML
14 points
In this article, we would like to show you the difference between innerHTML and outerHTML in JavaScript.
Outer HTML term in JavaScript describes HTML source code that is inside some element (Inner HTML) bounded by element tag code with all attributes.
The difference between innerHTML and outerHTML html:
- innerHTML = HTML inside of the selected element
- outerHTML = HTML inside of the selected element + HTML of the selected element
Let's take a look at the below example.
HTML example
xxxxxxxxxx1
<div id="element">2
<p>Hello world</p>3
</div>innerHTML
xxxxxxxxxx1
<p>Hello world</p>outerHTML
xxxxxxxxxx1
<div id="element">2
<p>Hello world</p>3
</div>Another way to look at this is with below description + image
- innerHTML = Enclosed tag content
- outerHTML = Opening tag + Enclosed tag content + Closing tag
Now we can test it by ourselves with the below 2 practical code examples.
xxxxxxxxxx1
<html>2
<body>3
<div id="element">4
<p>Hello world</p>5
</div>6
<script>7
8
var element = document.getElementById('element');9
10
console.log('innerHTML:');11
console.log(element.innerHTML);12
13
console.log('outerHTML:');14
console.log(element.outerHTML);15
16
</script>17
</body>18
</html>xxxxxxxxxx1
<html>2
<body>3
<div id="element">4
<h3>Head 1</h3>5
<p>Some apostrophe text...</p>6
<h3>Head 2</h3>7
<p>Some apostrophe text...</p>8
</div>9
<script>10
11
var element = document.getElementById('element');12
13
console.log('innerHTML:');14
console.log(element.innerHTML);15
16
console.log('outerHTML:');17
console.log(element.outerHTML);18
19
</script>20
</body>21
</html>