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 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 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 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 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 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