jQuery DOM Manipulation

The DOM (Document Object Model) is the structured representation of an HTML page. Every HTML element — headings, paragraphs, buttons, images — is a node in the DOM tree. jQuery provides powerful methods to read, change, add, and remove these nodes dynamically, without reloading the page.

What is the DOM?

When a browser loads an HTML page, it creates a tree-like model of all the elements. This tree is called the DOM. JavaScript (and jQuery) can access and modify this tree to change what the user sees on screen.

For example, if the HTML contains <p id="greeting">Good morning!</p>, jQuery can change "Good morning!" to "Good evening!" without refreshing the page.

Reading Content

text()

Gets or sets the plain text content of an element (no HTML tags).

// Get text
var message = $("#greeting").text();
console.log(message);  // Output: Good morning!

// Set text
$("#greeting").text("Good evening!");

html()

Gets or sets the HTML content inside an element, including any tags.

// Get inner HTML
var content = $("#box").html();

// Set inner HTML (allows tags)
$("#box").html("<strong>Bold Text</strong>");

val()

Gets or sets the value of a form input field.

var name = $("#nameInput").val();    // Get
$("#nameInput").val("John Doe");     // Set

Adding Elements

jQuery provides several methods to insert new elements into the DOM.

append() — Add content INSIDE, at the END

$("#shoppingList").append("<li>Eggs</li>");

prepend() — Add content INSIDE, at the BEGINNING

$("#shoppingList").prepend("<li>Milk</li>");

after() — Add content OUTSIDE, AFTER the element

$("#mainImage").after("<p>Image caption goes here.</p>");

before() — Add content OUTSIDE, BEFORE the element

$("#mainImage").before("<h4>Photo of the Day</h4>");

Insertion Methods at a Glance

• prepend() — Inside, at the start
• append() — Inside, at the end
• before() — Outside, before the element
• after() — Outside, after the element

Full Example: Adding Items to a List

<ul id="taskList">
  <li>Buy groceries</li>
</ul>
<button id="addTask">Add Task</button>

<script>
$(function() {
  $("#addTask").click(function() {
    $("#taskList").append("<li>New Task</li>");
  });
});
</script>

Removing Elements

remove()

Completely removes the selected element(s) from the DOM, including all children and attached events.

$("#notification").remove();

empty()

Removes only the contents (children) of an element, but keeps the element itself in place.

$("#chatBox").empty();    // Clears messages, but #chatBox div remains

detach()

Similar to remove(), but preserves the element's attached jQuery data and events so it can be re-inserted later.

var savedPanel = $("#infoPanel").detach();
// Later...
$("body").append(savedPanel);

Working with Attributes

attr() — Get or Set Attributes

// Get an attribute value
var linkTarget = $("a#mainLink").attr("href");

// Set an attribute value
$("img#logo").attr("src", "new-logo.png");

removeAttr() — Remove an Attribute

$("input#age").removeAttr("disabled");    // Enables a disabled input

prop() — Get or Set Properties

prop() is used for boolean attributes like checked, disabled, and selected.

// Check if a checkbox is checked
var isChecked = $("#agreeBox").prop("checked");  // Returns true or false

// Check the checkbox programmatically
$("#agreeBox").prop("checked", true);

Wrapping Elements

jQuery also allows wrapping elements with new parent tags.

// Wrap each <p> in a <div class="wrapper">
$("p").wrap("<div class='wrapper'></div>");

// Wrap all <p> elements together in a single container
$("p").wrapAll("<div class='container'></div>");

Key Points

• text() works with plain text; html() works with HTML content; val() works with form inputs.
• Calling these methods without an argument gets the value; calling with an argument sets the value.
• append() and prepend() insert content inside an element; after() and before() insert outside.
• remove() deletes the element; empty() clears its contents.
• Use attr() for regular HTML attributes and prop() for true/false properties like checked and disabled.