DOM Manipulation
Once you can select an element, jQuery gives you a small set of methods to read or replace what's inside it, and to add or remove elements from the page entirely.
.text() vs .html()
Starting from <p id="msg">Hello</p>:
JS app.js
console.log($("#msg").text());
$("#msg").text("Updated via jQuery");
console.log($("#msg").text());
Console output
Hello Updated via jQuery
.text() with no argument reads the plain text content; called with an argument, it replaces that content — treating whatever you pass as plain text, even if it happens to contain characters that look like markup.
JS app.js
$("#msg").html("<strong>Bold</strong> update");
Result
#msg now contains real markup: the word "Bold" renders in bold, followed by plain text " update" — .html() parses what you pass it as HTML, where .text() would have shown the literal <strong> tags as visible text.Inserting and removing elements
Starting from a three-item list — Apple, Banana, Cherry:
JS app.js
$("#list").append("<li>New last item</li>");
$("#list").prepend("<li>New first item</li>");
$("#list li:eq(2)").remove();
Result
The list ends up reading: New first item, Apple, Banana, New last item.
.append() added to the end, .prepend() added to the start, and :eq(2) — the third item at the point it ran, which by then was "Cherry" — was removed.Security note:
.html() carries the exact same risk as setting innerHTML in plain JavaScript — jQuery does no sanitization at all. Passing text a user typed straight into .html() is a direct cross-site-scripting hole if that text ever contains a <script> tag or an event-handler attribute. Use .text() for anything that isn't meant to be markup, full stop.