Add Remove HTML Elements Dynamically

Add Remove HTML Elements Dynamically With Javascript Using JQuery

Monday, March 16, 2009
Viper

jquery javascript javascript jquery

I was experimenting with some internals of JQuery while writing some simple one or two liner scripts to see how JQuery works. Like any programming language, we all start with a Hello world. So here is my Hello World example using JQuery.


<body>
 <form id="form1" runat="server">
  <div id="content">
  <script type="text/javascript">
  $(function() {
   var v = $("<p>Hello World</p>");
   v.insertAfter("#content");
   });
    
   </script>
   </div>
</form>
</body>

This simple piece of code is inserting a new paragraph HTML element dynamically into document. Translation of the script block is as below:

JQuery creates a new paragrah HTML element. If you look at the variable returned by first like of code, it looks as below. You can there is HTMLParagraphElement which is DOM element representing p tag.
Next line of code tells jQuery to insert newly created paragraph element after an element that has id of content. JQuery finds that element using well known getElementById and calls DOM method to insert new element dynamically after element with id content.