Lesson 14: jQuery Modify Content

Master jQuery methods for modifying content in HTML elements. Learn how to update text, HTML, values, and attributes with interactive examples.

Understanding jQuery Modification Methods

jQuery provides powerful methods to modify content in HTML elements. These methods allow you to update text content, HTML structure, form values, and element attributes.

Key Methods:
  • text() - Sets text content of elements
  • html() - Sets HTML content including tags
  • val() - Sets the value of form fields
  • attr() - Sets the value of an attribute
  • css() - Modifies CSS properties of elements
Method Description Example
text() Sets text content without HTML tags $("p").text("New text")
html() Sets content including HTML tags $("div").html("<b>New HTML</b>")
val() Sets value of form elements $("input").val("New value")
attr() Sets value of specified attribute $("a").attr("href", "new.html")

text() Method

The text() method sets the text content of selected elements. Any existing content will be replaced.

Example 14.1: Modifying Text Content

Update text content of elements:

Original Heading

This is the original paragraph content.

Nested content inside a div

// text() method example
$("#text-modify-btn").on('click', function() {
    $("#text-demo h3").text("Updated Heading");
    $("#text-demo p").text("This text has been modified using jQuery!");
});

$("#text-reset").on('click', function() {
    $("#text-demo h3").text("Original Heading");
    $("#text-demo p").text("This is the original paragraph content.");
    $("#text-demo div p").text("Nested content inside a div");
});

html() Method

The html() method sets the HTML content of selected elements. You can include HTML tags in the content.

Example 14.2: Modifying HTML Content

Update HTML content of elements:

Original HTML Content

This is the original paragraph content.

Nested content inside a div

// html() method example
$("#html-modify-btn").on('click', function() {
    $("#html-demo h3").html("Updated <i>HTML</i> Content");
    $("#html-demo p").html("This has been <strong style='color:red;'>modified</strong> with HTML!");
    $("#html-demo div").html("<p>New nested content</p><ul><li>List item 1</li><li>List item 2</li></ul>");
});

$("#html-reset").on('click', function() {
    $("#html-demo h3").html("Original HTML Content");
    $("#html-demo p").html("This is the original <strong>paragraph</strong> content.");
    $("#html-demo div").html("<p>Nested content inside a div</p>");
});

val() Method

The val() method sets the value of form elements such as input fields, select boxes, and textareas.

Example 14.3: Modifying Form Values

Update values in form elements:

// val() method example
$("#val-modify-btn").on('click', function() {
    $("#name").val("John Doe");
    $("#email").val("[email protected]");
    $("#country").val("uk");
});

$("#val-reset").on('click', function() {
    $("#name").val("Original Name");
    $("#email").val("[email protected]");
    $("#country").val("ca");
});

attr() Method

The attr() method sets the value of the specified attribute for selected elements.

Example 14.4: Modifying Attribute Values

Update various attributes of elements:

Original Placeholder

Current Source: https://via.placeholder.com/150

Visit JavaScript Tutor

Current Href: https://javascript-tutor.net

Div with data attribute

Current data-info: Original Data

// attr() method example
$("#attr-modify-btn").on('click', function() {
    // Change image source
    $("#attr-img").attr("src", "https://via.placeholder.com/300");
    $("#attr-img").attr("alt", "Updated Placeholder");
    $("#img-src-display").text("https://via.placeholder.com/300");
    
    // Change link href
    $("#attr-link").attr("href", "https://google.com");
    $("#attr-link").text("Visit Google");
    $("#link-href-display").text("https://google.com");
    
    // Change data attribute
    $("#attr-div").attr("data-info", "Updated Data");
    $("#data-info-display").text("Updated Data");
});

$("#attr-reset").on('click', function() {
    // Reset image attributes
    $("#attr-img").attr("src", "https://via.placeholder.com/150");
    $("#attr-img").attr("alt", "Original Placeholder");
    $("#img-src-display").text("https://via.placeholder.com/150");
    
    // Reset link attributes
    $("#attr-link").attr("href", "https://javascript-tutor.net");
    $("#attr-link").text("Visit JavaScript Tutor");
    $("#link-href-display").text("https://javascript-tutor.net");
    
    // Reset data attribute
    $("#attr-div").attr("data-info", "Original Data");
    $("#data-info-display").text("Original Data");
});

Combining Methods

Combine different modification methods to create more complex interactions.

Example 14.5: Combined Content Modification

Modify multiple elements using different methods:

Card 1

Original content

Card 2

Original content

Card 3

Original content

// Combined method example
$("#combined-modify-btn").on('click', function() {
    // Update text content
    $("#card1 h4").text("Updated Card 1");
    $("#card1 p").text("Text modified using text()");
    
    // Update HTML content
    $("#card2").html("<h4>Updated Card 2</h4><p><strong>HTML</strong> modified using html()</p>");
    
    // Update attributes
    $("#card3").attr("data-info", "New Data");
    $("#card3 h4").text("Card 3 (Updated)");
    $("#card3 p").text("Attributes modified");
});

$("#combined-reset").on('click', function() {
    // Reset card 1
    $("#card1 h4").text("Card 1");
    $("#card1 p").text("Original content");
    
    // Reset card 2
    $("#card2").html("<h4>Card 2</h4><p>Original content</p>");
    $("#card2").attr("data-id", "12345");
    
    // Reset card 3
    $("#card3 h4").text("Card 3");
    $("#card3 p").text("Original content");
    $("#card3").removeAttr("data-info");
});

Practical Applications

jQuery content modification methods are essential for creating dynamic web applications:

Form Handling

Set form values based on user actions or server responses.

Dynamic Updates

Update content without reloading the entire page.

Image Galleries

Modify image sources and attributes for slideshows.

Navigation

Update links and navigation elements dynamically.

Interactive Playground

Click any card to see content modification in action:

Text Demo

Click to modify text

HTML Demo

Click to modify HTML

Attribute Demo

Click to modify attributes

// Interactive playground
$("#play1").on('click', function() {
    $(this).find("h4").text("Text Modified!");
    $(this).find("p").text("Content updated using text()");
});

$("#play2").on('click', function() {
    $(this).html("<h4>HTML Modified!</h4><p>Content updated using <strong>html()</strong></p>");
});

$("#play3").on('click', function() {
    $(this).attr("data-info", "New Data");
    $(this).find("h4").text("Attributes Modified!");
    $(this).find("p").text("Check data attributes");
});

Best Practices

Follow these guidelines when modifying content with jQuery:

  • Chain methods for multiple operations on the same element
  • Use callbacks for complex modifications after animations
  • Sanitize user input when setting HTML content
  • Cache selectors when modifying elements multiple times
  • Use prop() instead of attr() for boolean properties
// Good practices for content modification

// 1. Chaining methods
$("#element")
    .text("New text")
    .addClass("highlight")
    .css("color", "red");

// 2. Using callbacks
$("#element").fadeOut(500, function() {
    $(this).text("Updated content").fadeIn(500);
});

// 3. Sanitizing HTML content
function sanitizeHTML(html) {
    // Sanitization logic here
    return safeHtml;
}
$("#userContent").html(sanitizeHTML(userInput));

// 4. Caching selectors
const $form = $("#userForm");
$form.find("#name").val("John");
$form.find("#email").val("[email protected]");

// 5. Using prop() for boolean properties
$("#checkbox").prop("checked", true);
Previous Lesson: Get Content Next Lesson: Adding Content