Find out the difference between innerHTML and outerHTML in JavaScript

Description

The following code shows how to find out the difference between innerHTML and outerHTML.

Example


<!--from www  .  j av  a  2  s .  c om-->
<!DOCTYPE HTML>
<html>
<body>
<table>
<tbody>
<tr id="myRow"><td>A</td><td>B</td></tr>
</tbody>
</table>
<textarea rows="3" id="results"></textarea>
<button id="inner">Inner HTML</button>
<button id="outer">Outer HTML</button>
<script>
var results = document.getElementById("results");
var row = document.getElementById("myRow");
document.getElementById("inner").onclick = function() {
results.innerHTML = row.innerHTML;
};
document.getElementById("outer").onclick = function() {
results.innerHTML = row.outerHTML;
}
</script>
</body>
</html>

Click to view the demo

The code above generates the following result.

Find out the difference between innerHTML and outerHTML in JavaScript
Home »
  Javascript Tutorial »
    DOM »
      Check
Javascript Tutorial Check
Check if an element has a certain attribute...
Check the length of a NodeList for a div el...
Check the length of the array returned from...
Compare two nodes with isSameNode in JavaSc...
Determine the node type in JavaScript
Find out the difference between innerHTML a...
Parse current document as the function para...