HI WELCOME TO SIRIS

jQuery with HTML Method References

What can we do jQuery with HTML? jQuery HTML method is perform for changing and manipulate the HTML elements or attributes.
Following few are HTML manipulation methods that are frequently useful,
  • jQuery html() Method
  • jQuery append() Method
  • jQuery prepend() Method
  • jQuery after() Method
  • jQuery before() Method

jQuery html() Method

jQuery html() method sets or returns the innerHTML content of the selected elements.
Syntax
$(selector).html();              // Return content
$(selector).html( [content] );   // Set content
Example
$(document).ready(function(){
  $("button").click(function(){
    $("div").html("<p>New text set on this element.</p>");
  });
});

Example Result

jQuery append() Method

jQuery append() method inserts the specified content at the end of the selected elements.
Syntax
$(selector).append(content, [function] );
Example
$(document).ready(function(){
  $("button").click(function(){
    $("div").append("<p>New text come after end of selected element.</p>");
  });
});

Example Result

jQuery prepend() Method

jQuery prepend() method inserts the specified content at the first of the selected elements.
Syntax
$(selector).prepend(content, [function] );
Example
$(document).ready(function(){
  $("button").click(function(){
    $("div").prepend("<p>New text come first of the selected element.</p>");
  });
});

Example Result

jQuery after() Method

jQuery after() method inserts the specified content after the selected elements.
Syntax
$(selector).after(content, [function] );
Example
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>New text come after end of selected element.</p>");
  });
});

Example Result

jQuery before() Method

jQuery before() method inserts the specified content in the before of the selected elements.
Syntax
$(selector).before(content, [function] );
Example
$(document).ready(function(){
  $("button").click(function(){
    $("div").before("<p>New text come before of the selected element.</p>");
  });
});

Example Result