Getting and Setting Content

In jQuery, getting and setting content refers to manipulating the text and HTML content of elements on a webpage. jQuery provides several methods to retrieve or modify content within selected elements. Here’s how you can get and set content using jQuery:

Getting Content

.text() Method:
- Gets the combined text contents of each element in the set of matched elements, including their descendants.
```
var textContent = $("#myElement").text();
console.log(textContent); // Outputs the text content of #myElement
```

.html() Method:

Gets the HTML content (including nested elements) of the first element in the matched set.

var htmlContent = $("#myElement").html();
console.log(htmlContent); // Outputs the HTML content of #myElement

Setting Content

.text() Method:
- Sets the text content of all matched elements.
```
$("#myElement").text("New text content");
```

.html() Method:

Sets the HTML content of all matched elements.

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

Example

Here’s an example that demonstrates getting and setting content using jQuery:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Getting and Setting Content</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // Getting content
      $("#getTextButton").click(function() {
        var textContent = $("#myText").text();
        alert("Text Content: " + textContent);
      });

      $("#getHtmlButton").click(function() {
        var htmlContent = $("#myHtml").html();
        alert("HTML Content: " + htmlContent);
      });

      // Setting content
      $("#setTextButton").click(function() {
        $("#myText").text("New text content");
      });

      $("#setHtmlButton").click(function() {
        $("#myHtml").html("<strong>New <em>HTML</em> content</strong>");
      });
    });
  </script>
</head>
<body>
  <h1>jQuery Getting and Setting Content Example</h1>
  
  <div>
    <p id="myText">Original text content</p>
    <button id="getTextButton">Get Text Content</button>
    <button id="setTextButton">Set Text Content</button>
  </div>

  <div>
    <div id="myHtml">Original <em>HTML</em> content</div>
    <button id="getHtmlButton">Get HTML Content</button>
    <button id="setHtmlButton">Set HTML Content</button>
  </div>
</body>
</html>

Explanation

Getting Content:
- Clicking the "Get Text Content" button retrieves the text content of <p id="myText">.
- Clicking the "Get HTML Content" button retrieves the HTML content of <div id="myHtml">.
Setting Content:
- Clicking the "Set Text Content" button changes the text content of <p id="myText"> to "New text content".
- Clicking the "Set HTML Content" button changes the HTML content of <div id="myHtml"> to <strong>New <em>HTML</em> content</strong>.

These methods (text() and html()) are fundamental for dynamically updating content on a webpage based on user interactions, data from APIs, or other sources. They provide a straightforward way to manipulate both text and HTML content within selected elements using jQuery.

Written by Shaikh Abdul Shahid

A Full-Stack Developer with experience in PHP, Laravel, JavaScript, and React.
Founder of Online Learner, sharing practical knowledge and programming tutorials.
Building and maintaining real-world web applications since 2017.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Selecting elements

Next: Adding and removing elements

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.