Tutorials › jQuery in Practice › DOM Manipulation

DOM Manipulation

5 min read Quiz at the end

Modify the DOM with html(), text(), val(), append(), prepend(), after(), and remove(). These work on all matched elements at once. Chaining lets you apply multiple operations in one readable line of code.

Changing the DOM

$('h1').text('Hello!');          // set text
$('p').html('Bold');     // set HTML
$('input').val('default');      // set value

$('body').append('New'); // add at end
$('ul').prepend('First');
$('#box').remove();              // delete element
$('#box').empty();               // clear contents

← DOM Traversal Next: CSS and Classes →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which method sets text content?

💡 .text() sets or gets the text content — it escapes HTML for safety.

2. Which method sets HTML content?

💡 .html() sets or gets the inner HTML of an element.

3. Which method adds content at the end?

💡 .append() adds content at the end of the matched elements.

4. Which method removes an element from DOM?

💡 .remove() deletes the element and its data/events from the DOM.

5. What does .empty() do?

💡 .empty() removes all children and content but keeps the element itself.

Quick Access

DOM Manipulation

Changing the DOM

Test your understanding before moving on