DOM Manipulation

Introduction

Once you've selected elements, you'll want to change them. jQuery provides concise getter/setter methods: call a method with no argument to read, or with an argument to write. This lesson covers the everyday manipulation methods and an important security rule about .html().

Theory

Content

• .text() — get/set text content. Treats input as plain text (safe).
• .html() — get/set inner HTML. Parses input as HTML (powerful but risky).
• .val() — get/set the value of form fields.

Attributes & styles

• .attr('href', '...') — get/set an attribute.
• .css('color', 'red') — get/set a CSS property (or pass an object for several).

Classes

• .addClass('active'), .removeClass('active')
• .toggleClass('active') — adds it if absent, removes it if present
• .hasClass('active') — returns true/false

Inserting elements

• .append(content) — add to the end of the matched element.
• .prepend(content) — add to the beginning.
• .before() / .after() — insert outside the element.
• .remove() / .empty() — delete elements / clear contents.

Real World Example

Type something and click the buttons. The output uses .text() so whatever you type — including <script> — is shown literally, never executed:

$('#box').text($('#nameInput').val());   // safe — input shown as text
$('#box').toggleClass('highlight');       // toggle a class
$('#box').css('color', 'crimson');        // change a style
$('#list').append('<li>New item</li>');   // trusted markup only

Common Mistakes

• Using .html() on user input. This is the classic jQuery XSS hole — always use .text() for untrusted data.
• Confusing .text() with .val(). Form fields use .val(); their displayed value isn't text content.
• Forgetting setters affect all matched elements. $('.x').text('hi') sets the text of every .x.
• Using .removeClass() with no argument carelessly. It strips all classes.

Best Practices

• Default to .text(); only use .html() for markup you wrote yourself.
• Use .toggleClass() for on/off states instead of manual add/remove logic.
• Pass an object to .css({}) when setting multiple properties at once.
• Build complex content with element creation rather than string concatenation when user data is involved.

Practice Exercise

1. Add a paragraph and a text input. On a button click, set the paragraph's text from the input with .text().
2. Add a button that toggles a highlight class on the paragraph.
3. Add a button that changes the paragraph color with .css().
4. Append a new list item to a list with .append().

Assignment

Build a mini "comment box" demo:

1. A textarea and a "Post" button.
2. On click, read the textarea with .val() and append the comment to a list — using .text() on a created <li>, never .html().
3. Add a "Clear all" button that uses .empty() on the list.
4. Confirm that typing <script>alert(1)</script> shows as literal text, proving your code is XSS-safe.

Interview Questions

• What is the difference between .text() and .html()? — .text() reads/sets plain text (escaped); .html() reads/sets parsed HTML (can execute markup).
• Why is .html() a security concern? — Passing untrusted input lets attackers inject scripts (XSS); use .text() for user data.
• How do you read a form field's value? — .val().
• What does .toggleClass() do? — Adds the class if it's missing, removes it if present.
• How do you add an element to the end of a container? — .append() (or .appendTo()).

Additional Resources

• api.jquery.com/category/manipulation — manipulation methods
• api.jquery.com/category/attributes — attribute and class methods
• owasp.org — Cross-Site Scripting (XSS) prevention guidance