|
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.
|
<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
|
