Get and Set Inner Text of HTML Elements in jQuery

jQuery makes DOM manipulation incredibly easy in JavaScript. Updating contents of HTML elements is a common task in most web applications. This guide will explore jQuery‘s powerful methods like html(), text() and val() to get and set text, HTML and form values without needing complex DOM operations.

Selecting Elements with jQuery

The first step for updating any element is accessing it with jQuery selectors. jQuery uses CSS style selectors to match sets of elements.

$("#elementId"); // Select by ID
$(".class"); // Select by class name
$("div"); // Select all div elements

Some other useful selectors:

$("a[target=_blank]"); // Attribute selection
$("p:first"); // psuedo-selectors like :first, :last etc

These enable selecting elements in very versatile ways for updating contents.

Getting and Setting Inner HTML with html()

The html() method can get or set the HTML content of matched elements.

Get HTML Content

To get current HTML content as a string:

let content = $("p").html();

This gets innerHTML of the first paragraph element.

Set HTML Content

To set new HTML content:

$("p").html("<b>New paragraph</b>"); 

This replaces HTML content of all matched paragraph elements.

Consider this HTML:

<div>
  <p>Hello World!</p>
  <p>This is paragraph 2</p>
</div>

We can update all paragraphs as:

$("p").html("<span>Updated paragraph</span>");

This dynamically replaces contents of all p elements.

Chaining jQuery Methods

jQuery methods can be chained for easy sequence of DOM manipulations.

For example, to add a class to updated elements:

$("p").html("Updated").addClass("updated");

This updates content first, then adds a class to matched elements.

Getting and Setting Text with text()

When you only need to get and set text content without any HTML tags, the text() method can be used.

Get Text Content

To get just text content:

let text = $("p").text(); 

This strips all HTML tags, getting only inner text.

Set Text Content

To set the text content:

$("p").text("This is the new text"); 

Similar to html(), this replaces text of all matched paragraph elements.

Consider the same HTML from previous example:

$("p").text("Updated text content");

This will set the paragraph texts to "Updated text content", removing any other HTML formatting.

Updating Form Values using val()

A very common jQuery use case is updating values of input fields and forms. This is done using the val() method.

Consider an input element:

<input type="text" id="username" value="John"> 

Get Value

To get its current value:

let user = $("#username").val(); // "John"

Set Value

To update value:

$("#username").val("Mary"); 

Similar to text() and html(), val() also has a setter version to modify form values.

Comparing Performance with Vanilla JavaScript

While jQuery makes DOM manipulation very easy, sometimes directly using JavaScript may have better performance.

Here is example to compare text update using jQuery vs JavaScript:

jQuery

$("#element").text("New text!"); 

Vanilla JavaScript

document.getElementById("element").innerText = "New text!";

For trivial cases, jQuery is more concise and readable. But JavaScript will be faster for complex applications, especially with recent improvements in native API methods.

Both have merits – pick based on your use case!

Updating Contents Securely

When updating innerHTML dynamically, beware of DOM-based Cross-Site Scripting attacks.

Consider this vulnerable code:

let comment = getCommentFromDatabase(); 

$("#comments").html(comment); // Unsafe user input!

If the comment contains malicious JavaScript code, this could execute on the page leading to XSS attacks.

Mitigation Techniques

• Filter user inputs – sanitize before outputting HTML
• Escape untrusted outputs before setting with html()
• Use text() instead of html() where only text needed

These best practices avoid security risks when working with dynamic content.

Use Cases for Updating DOM Elements

Here are some common use cases where these jQuery methods prove very useful:

• Implementing rich text editors – html() allows inputting custom formatting
• Live previews – preview styling by updating dummy contents
• Templating engines – separate HTML templates filled at runtime
• Single page apps – no page reloads, only content updates
• Creating themes/skins – define alternate CSS and swap HTML
• Saving user-generated content from rich text editors

These demonstrate the wide applicability for DOM manipulation in web apps and sites.

Conclusion

This guide provided an overview of how jQuery can be used to easily update contents of HTML elements. Key points covered:

• Selecting elements with versatile jQuery selectors
• html() method to get and set complete inner HTML including tags
• text() method for getting and setting just the text content
• Using val() to update form input values
• Chaining jQuery methods for sequence of actions
• Performance and security considerations

Whether you need to implement dynamic UIs or build reactive web apps, these jQuery methods remove a lot of boring DOM operations code. With the power of jQuery, modifying document contents becomes fun and productive!