outerHTML and innerHTML
If you want to get html of current element you have to use outerHTML of JavaScript. jQuery not provide any function which retrun outHTML of element but jQuery provide html() function which return innerHTML of current element.
outerHTML means html with current element and innerHTML means html without current element. If you get table html with the help of html() function of jQuery it return all tbody of that table not current table.
As we know that if we use [0] after selector it return DOM element not jQuery object, so after getting DOM element you can use outerHTML or innerHTML.
$('.tblCountry')[0].outerHTML
CODE
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnOuterHtml').click(function () {
alert($('.tblCountry')[0].outerHTML);
});
$('.btnInnerHtml').click(function () {
alert($('.tblCountry').html());
});
});
</script>
</head>
<body>
<div class="Container">
<table class="tblCountry" border="1" cellspacing="0" cellpadding="5">
<tbody>
<tr><td>Country Id</td><td>Country Name</td></tr>
<tr><td>1</td><td>India</td></tr>
<tr><td>2</td><td>Japan</td></tr>
</tbody>
</table>
<button type="button" class="btnOuterHtml">Get Outer Html</button>
<button type="button" class="btnInnerHtml">Get Inner Html</button>
</div>
</body>
</html>
DISPLAY
| Country Id | Country Name |
| 1 | India |
| 2 | Japan |
No comments :
Please Give Your Feedback