Displays the html tags without rendering on a webpage

<script type="text/javascript">
function firstMethod()
{
  var str = document.getElementById("tbl").innerHTML.replace(/[<]/g,'&lt;');
  str = str.replace(/[>]/g,'&gt;');
  document.getElementById("displayHTML").innerHTML = str;
}
function secondMethod()
{
  document.getElementById("displayHTML").innerText = document.getElementById("tbl").innerHTML;
}
</script>

.
.
.

<body>
  <div id="displayHTML"></div>
  <table border="1" id="tbl">
    <tr>
      <td style="width: 100px">
        1</td>
      <td style="width: 100px">
        2</td>
      <td style="width: 100px">
        3</td>
    </tr>
    <tr>
      <td style="width: 100px">
        4</td>
      <td style="width: 100px">
        5</td>
      <td style="width: 100px">
        6</td>
    </tr>
    <tr>
      <td style="width: 100px">
        7</td>
      <td style="width: 100px">
        8</td>
      <td style="width: 100px">
        9</td>
    </tr>
  </table>
  <input type="button" value="use conventional method" onclick="firstMethod()" />
  <input type="button" value="use serkan's method" onclick="secondMethod()" />
</body>