← Back to Chapters

jQuery HTML Tutorial

? jQuery HTML Tutorial

✨ Quick Overview

jQuery provides simple and powerful methods to get and set HTML content inside elements. The most commonly used method is .html().

? Key Concepts

  • .html() retrieves or updates HTML markup
  • .text() works with plain text only
  • jQuery simplifies DOM manipulation

? Syntax / Theory

Calling .html() without arguments returns the inner HTML of the selected element. Passing a string replaces the existing content.

? View Code Example
// Get HTML content of an element
$("#example").html();
? View Code Example
// Set new HTML content inside an element
$("#example").html("<b>Bold text</b>");

? Code Example(s)

This is some HTML content.

? Live Output / Explanation

Click the buttons to see how HTML content is fetched and replaced dynamically.

? View Code Example
// Compare html() and text() methods
let htmlContent = $("#example").html();
let textContent = $("#example").text();

? Interactive Example

Type some HTML code below (e.g., <button>Click me</button>):

Your content will appear here...

 

? Use Cases

  • Dynamically updating UI sections
  • Injecting formatted content
  • Reading existing HTML structure

✅ Tips & Best Practices

  • Use .html() only with trusted content
  • Prefer .text() for user input
  • Use .append() to add content instead of replacing

? Try It Yourself

  • Create a button that appends new HTML
  • Toggle between two HTML layouts
  • Compare .html() vs .text() outputs