Knowledge Walls
John Peter
Pune, Maharashtra, India
Difference between innerHTML and outerHTML in Javascript Element Object with Example
26060 Views
InnerHTML vs outerHTML properties 
innerHTML and outerHTML are properties of element object in javascript. These two things are used to replace the content and selected tag.

innerHTML is set or get content of the selected tag.
outerHTML is set or get content with selected tag.
Example
<html>
    <head>
        <style type="text/css">
            .square_box {
               padding: 20px;
               background-color: lightgreen;
               display: inline-block;
            }
        </style>
        <script type="text/javascript">
            document.getElementById("a_square_box").innerHTML = "A Plus";
            document.getElementById("b_square_box").outerHTML = "B Plus";
        </script>
    </head>
    <body>
         <div id="a_square_box" class="square_box">A</div>
         <div id="b_square_box" class="square_box">B</div>
    </body>
</html>
Demo & Output 
Best Lessons of "Good Javascript Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details