html and text Methods

html and text Methods: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 11 of 100

html and text Methods

Setup & DOM → Events Effects AJAX → Perf & Integrate → Ship & Projects

Setup & DOM · 1 — Select · ~6 min · DOM Updates

What is this?

text() reads and writes plain text (HTML is escaped). html() reads and writes markup. Prefer text() for anything that might include user or API strings.

Why should you care?

Flash messages and labels are daily QueryVerse work — picking text vs html is an XSS decision, not just formatting.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <div id="panel" class="box">Old</div>
  <button type="button" id="asText">Set text</button>
  <button type="button" id="asHtml">Set html</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#asText').on('click', function () {
    $('#panel').text('<b>safe</b> plain');
  });
  $('#asHtml').on('click', function () {
    $('#panel').html('<b>bold</b> markup');
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <div id="panel" class="box">Old</div>
  <button type="button" id="asText">Set text</button>
  <button type="button" id="asHtml">Set html</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#asText').on('click', function () {
    $('#panel').text('<b>safe</b> plain');
  });
  $('#asHtml').on('click', function () {
    $('#panel').html('<b>bold</b> markup');
  });
});
</script>
</body>
</html>

Result