jQuery Get/Set Content

jQuery provides a variety of methods to get or set the content of elements. These methods allow you to manipulate both the text and HTML inside elements, as well as their attributes, making it easy to dynamically update the content of your web pages.

Get Methods

1. .html(): Gets the HTML content of the selected element(s).

   var content = $("#myDiv").html();
   alert(content); // Displays the HTML content of #myDiv
   

   Try It Now

2. .text(): Gets the text content of the selected element(s), excluding any HTML tags.

   var content = $("#myDiv").text();
   alert(content); // Displays the text content of #myDiv
   

   Try It Now

3. .val(): Gets the value of form elements like <input>, <textarea>, and <select>.

   var value = $("#myInput").val();
   alert(value); // Displays the value of the input field #myInput
   

   Try It Now

4. .attr(): Gets the value of an attribute for the selected element.

   var src = $("#myImage").attr("src");
   alert(src); // Displays the src attribute of #myImage
   

   Try It Now

Set Methods

1. .html(content): Sets the HTML content of the selected element(s).

   $("#myDiv").html("<strong>New HTML content</strong>");
   

   Try It Now

2. .text(content): Sets the text content of the selected element(s).

   $("#myDiv").text("New text content");
   

   Try It Now

3. .val(value): Sets the value of form elements like <input>, <textarea>, and <select>.

   $("#myInput").val("New value");
   

   Try It Now

4. .attr(attributeName, value): Sets the value of an attribute for the selected element.

   $("#myImage").attr("src", "newImage.jpg");
   

   Try It Now

Example: Getting and Setting Content

// Getting content
var htmlContent = $("#myDiv").html();
var textContent = $("#myDiv").text();
var inputValue = $("#myInput").val();
var imageSrc = $("#myImage").attr("src");

// Setting content
$("#myDiv").html("<p>Updated HTML content</p>");
$("#myDiv").text("Updated text content");
$("#myInput").val("Updated input value");
$("#myImage").attr("src", "updatedImage.jpg");

<div id="myDiv"><strong>Original content</strong></div>
<button id="changeContent">Change Content</button>

$("#changeContent").click(function() {
    $("#myDiv").html("<em>New HTML content</em>");
    console.log($("#myDiv").text()); // Logs "New HTML content"
});

<input type="text" id="myInput" value="Original value">
<button id="updateValue">Update Value</button>

$("#updateValue").click(function() {
    var currentValue = $("#myInput").val();
    alert("Current Value: " + currentValue);
    $("#myInput").val("Updated value");
});

<img id="myImage" src="originalImage.jpg" alt="Original Image">
<button id="changeImage">Change Image</button>

$("#changeImage").click(function() {
    $("#myImage").attr("src", "newImage.jpg");
});

$("#myImage").attr({
    src: "newImage.jpg",
    alt: "New Image Description"
});