DOM Manipulation

Learning objectives#

• Read and set text, HTML and input values
• Use .attr() vs .prop() correctly
• Store and read data-* values with .data()
• Avoid XSS by preferring .text() for user input

Explanation#

.text() reads/sets plain text; .html() reads/sets HTML markup; .val() reads/sets form field values.

Getter vs setter: $("#title").text() returns the text of the first match; $("#title").text("Hi") sets it on every match and returns the jQuery object for chaining.

.attr("href") works with HTML attributes as written; .prop("checked") / .prop("disabled") work with live DOM properties. Use .prop for checked, selected and disabled.

.data("price") reads data-price="499" and converts it to a number; .data("x", value) stores values in jQuery’s cache (it does not change the HTML attribute).

Never put user input into .html(): a name like <img src=x onerror=alert(1)> would run. Use .text(), which escapes it.

Syntax#

1$('#title').text();             // read
2$('#title').text('New title');  // write
3$('#email').val('a@b.com');
4$('#link').attr('href', '/home');
5$('#agree').prop('checked', true);
6$('#card').data('price');       // data-price="499" → 499

Code example: Reading and writing a product card#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<div id="card" data-price="499" data-stock="3" style="font-family:sans-serif">
3  <h3 class="name">Notebook</h3>
4  <a class="more" href="/products/1">Details</a>
5  <label><input type="checkbox" class="gift"> Gift wrap</label>
6  <input class="qty" value="1" size="3">
7  <p class="note"></p>
8</div>
9<script>
10  $(function () {
11    const $card = $('#card');
12    console.log('Name:', $card.find('.name').text());
13    console.log('Price:', $card.data('price'), typeof $card.data('price'));
14    console.log('Link:', $card.find('.more').attr('href'));
15

16    $card.find('.name').text('Spiral Notebook');
17    $card.find('.qty').val(2);
18    $card.find('.gift').prop('checked', true);
19    console.log('Gift?', $card.find('.gift').prop('checked'));
20

21    const userInput = '<b>Asha</b>';
22    $card.find('.note').text('Ordered by ' + userInput);   // shown as plain text, not bold
23  });
24</script>

Name: Notebook
Price: 499 number
Link: /products/1
Gift? true
(The heading becomes “Spiral Notebook”, quantity shows 2, the checkbox is ticked, and the note shows the literal text “Ordered by <b>Asha</b>”.)

Step-by-step explanation#

1. .text() with no argument reads the heading.
2. .data("price") converts "499" to the number 499.
3. .attr("href") reads the attribute exactly as written.
4. Setters (.text("..."), .val(2), .prop("checked", true)) update the page.
5. .text() escapes the user input, so the <b> tag is shown, not executed.

Real-world use case#

Common mistakes#

Best practices#

• .text() for user content
• .prop() for checked/disabled/selected
• data-* attributes for values the script needs
• Chain setters on one selection

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<input id="price" value="100"> <button id="apply">Add GST</button>
3<p>Total: <span id="total">–</span></p>
4<script>
5  $(function () {
6    $('#apply').on('click', function () {
7      const price = parseFloat($('#price').val()) || 0;
8      $('#total').text((price * 1.18).toFixed(2));   // 118.00
9    });
10  });
11</script>

Mini quiz#

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.