avireni
6/5/2012 - 7:45 PM

HTML Manipulation with jquery

HTML Manipulation with jquery

gistfile1.html
content_copyfile_download
Changing Content of HTML through jQuery

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("Change the content with jQuery");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Click me</button>
</body>
</html>


Append content to HTML through jQuery

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>Content appended through jQuery</b>.");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Click me</button>
</body>
</html>

Append Content after HTML through jQuery

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after(" New Paragraph added after HTML");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Click me</button>
</body>
</html>