Getting and Setting Elements
Working with web sites sometimes involves either dynamically updating their content or retrieving pre-existing content from elements. Strong and efficient jQuery methods, mostly.text() and.html(), may do this. Web development success requires knowing when and how to apply these two ways.
Understanding Element Content: Text vs. HTML
There are two types of “content” for a web page:
Plain Text Content: Web pages and jQuery use plain text content, which is text without HTML tags or formatting. When retrieving plain text content from an element, nested HTML tags (e.g. or ) are disregarded and stripped off, leaving only the visible text. Input special HTML characters are escaped when establishing plain text content, so they are displayed literally.
HTML Content: This includes nested HTML tags and their characteristics. The example would have “Hello World!” in HTML. Tags, text, and other components buried inside an HTML element make up its content. Web pages become dynamic with jQuery’s strong and easy content manipulation. This is essential for interactive web front ends.
JQuery handles both types of content differently.Instead of.text() or.html(), use.val() to retrieve or set text field, checkbox, and select list values.
The Method: Working with Plain Text
Just plain, human-readable text can be dealt with using jQuery’s.text() method.
Getting Text Content: When called without a parameter, the.text() function returns the combined text of all matched items. The unformatted text is left after it “strips out” HTML tags. HTML entities like ampersands and non-breaking spaces are transformed to their plain characters upon retrieval.
Setting Text Content: the new plain text string is used to update the content of all matched elements when a value argument is passed to.text(value). Importantly, jQuery immediately escapes every HTML entity in the string when content is set this way. HTML tags appear as text when entered. Type “Hello,” and the page will italicise it. To avoid XSS, this escape mechanism inhibits HTML translation of user input. The.text() function works for XML and XHTML.
The Method: Working with HTML Content
Instead, the entire HTML text, including tags, within an element is obtained and set using the.html() method.
Getting HTML Content: The HTML contents (innerHTML) of the first matched element are retrieved by the.html() function when it is invoked without input. This comprises the structure of every tag that is nested inside that element.
Setting HTML Content: .html(value) takes a value parameter and uses it to change the content of all matched elements to the new HTML string.This technique does not escape HTML entities and renders real HTML, unlike.text(). The string “Important!” will be bolded. Using.html() without proper security and format might cause layout issues and security concerns. This approach is typically unavailable for XML documents, although it functions for XHTML ones.
Practical Example: Getting and Setting Element Values
The subsequent example illustrates how to update and get content within web page components using both the.text() and.html() methods.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Get/Set Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { font-family: Arial; margin: 20px; }
div { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; }
button { margin-right: 5px; }
</style>
<script>
$(document).ready(function() {
// Get text content
$("#getText").click(function() {
let text = $("#textDiv").text();
$("#output").text("Text: " + text);
});
// Get HTML content
$("#getHtml").click(function() {
let html = $("#htmlDiv").html();
$("#output").text("HTML: " + html);
});
// Set new text
$("#setText").click(function() {
$("#textDiv").text("New plain text (HTML tags will show as text). <b>Bold?</b>");
});
// Set new HTML
$("#setHtml").click(function() {
$("#htmlDiv").html("New HTML with <b>bold</b> and <i>italic</i> text.");
});
// Reset
$("#reset").click(function() {
$("#textDiv").text("This is plain text.");
$("#htmlDiv").html("This is <b>HTML</b> content.");
$("#output").text("");
});
});
</script>
</head>
<body>
<h2>Text Div:</h2>
<div id="textDiv">This is plain text.</div>
<h2>HTML Div:</h2>
<div id="htmlDiv">This is <b>HTML</b> content.</div>
<h3>Buttons:</h3>
<button id="getText">Get Text</button>
<button id="getHtml">Get HTML</button>
<button id="setText">Set New Text</button>
<button id="setHtml">Set New HTML</button>
<button id="reset">Reset</button>
<h3>Output:</h3>
<div id="output"></div>
</body>
</html>Output:
Text Div:
This is plain text.
HTML Div:
This is HTML content.
Buttons:
Get Text Get HTML Set New Text Set New HTML Reset
Output:Output Behavior:
- Get Text: Shows the plain text from the first div.
- Get HTML: Shows the actual HTML string inside the second div.
- Set New Text: Replaces the first div’s content as plain text (HTML tags will not be rendered).
- Set New HTML: Replaces the second div’s content and renders HTML.
- Reset: Resets both divs and clears the output.
In $(document).ready(), jQuery code is wrapped. Make sure all HTML components are loaded before JavaScript uses them to avoid issues.
When you run this code
- To see how.text() only extracts the visible text, click “Get Text from Div 1” to see “Text Content: This is the original plain text content.” in the #output text div.
- Click “Get HTML from Div 2” in #output html to view “HTML Content (as text): Original HTML content with bold text and an italic word.” Even though the output div uses.text() to show the string, the HTML elements are part of it, preventing them from appearing as HTML components in the output area.
- Selecting “Set New Text in Div 1” will transform #div content text into “New text set from JavaScript.” This section will not be bold.”, which indicates that the tags were turned into literal text after being escaped.
- When “Set New HTML in Div 2” is selected, #div content html will become “New HTML set from JavaScript.” It will be bold here. Switch me!)”, indicating that the and tags are displayed as real HTML components.
- The “Reset All Content” button makes it simple to retest the functionalities by restoring the divs’ content to their original states.
You can achieve rich and dynamic user experiences by employing these techniques, which provide you exact control over the management of text and HTML content within your web pages.