2009/08/28 08:36
Displays the html tags without rendering on a webpage
2009/08/28 08:36 in HTML, Javascript
Following code display the HTML Tags without additonal web page rendering.
<script type="text/javascript">
function firstMethod()
{
var str = document.getElementById("tbl").innerHTML.replace(/[<]/g,'<');
str = str.replace(/[>]/g,'>');
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>
function firstMethod()
{
var str = document.getElementById("tbl").innerHTML.replace(/[<]/g,'<');
str = str.replace(/[>]/g,'>');
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>
This is a good example of using javascript innerText property which is not
as popular as innerHTML property.
Another posts included in "HTML, Javascript"
| To hide/show area of web page without re-loading a page (0) | 2009/08/28 |
| To compare two HTML tables on web page in real time (0) | 2009/08/28 |
| Photoshop script programming in Javascript (0) | 2009/09/14 |
| Javascript based query parser for AJAX application (0) | 2009/08/28 |
| To get web browser capability (0) | 2009/08/28 |
| Photo thumbnail viewer implement in javascript (0) | 2009/08/28 |
| Javascript Confirmation (0) | 2009/08/22 |
| Javascript Prompts (0) | 2009/08/22 |
Prev
Rss Feed