Keywords: jQuery | DOM Manipulation | Content Setting
Abstract: This article provides an in-depth exploration of methods for setting DIV tag content using jQuery, with detailed analysis of the differences and application scenarios between text() and html() methods. Through practical code examples, it thoroughly explains the impact of DOM loading timing on jQuery operations and introduces the correct usage of $(document).ready(). The article also covers the application of callback functions in content setting and the use of attr() method for attribute modification, offering comprehensive jQuery content manipulation solutions for front-end developers.
Overview of jQuery Content Setting Methods
In web development, jQuery provides multiple methods for manipulating DOM element content. Among these, text() and html() are the most commonly used content setting methods, each with distinct use cases and functionalities.
Differences Between text() and html() Methods
The text() method is specifically designed for setting or retrieving plain text content of elements. When using this method, any HTML tags passed will be treated as ordinary text and not parsed as DOM elements. For example:
$('div.total-title').text('<b>Bold Text</b>');After executing this code, the DIV element will display the literal text "<b>Bold Text</b>", not the bold "Bold Text".
In contrast, the html() method can set content containing HTML markup, which the browser will parse and render as corresponding DOM structure:
$('div.total-title').html('<b>Bold Text</b>');This code will display bold "Bold Text" within the DIV.
Importance of DOM Loading Timing
A common cause of jQuery operation failure is improper script execution timing. If JavaScript code executes before the target DOM element is loaded, the selector will be unable to find the corresponding element, causing the operation to fail.
Consider this incorrect example:
<script>
$('div.total-title').text('New Content');
</script>
<div class="total-title">Original Content</div>Since the script executes before the DIV element, $('div.total-title') cannot find the target element, and the operation will not take effect.
Proper Usage of $(document).ready()
jQuery provides the $(document).ready() method to ensure code executes after the DOM is fully loaded:
$(document).ready(function() {
$('div.total-title').text('New Content');
});The shorthand form can also be used:
$(function() {
$('div.total-title').text('New Content');
});Application of Callback Functions
jQuery's text() and html() methods support callback functions, which are particularly useful when dynamic modifications based on original content are needed. The callback function receives two parameters: element index and original content value.
$('div.total-title').text(function(index, originalText) {
return 'Modified Content: ' + originalText;
});Extended Applications for Attribute Setting
Beyond content manipulation, jQuery's attr() method can be used to modify element attributes. This method also supports callback functions:
$('a.link').attr('href', function(i, origValue) {
return origValue + '?modified=true';
});Best Practices Summary
In practical development, it's recommended to follow these best practices: use text() for plain text content to avoid XSS attack risks; ensure content sources are trustworthy when using html(); always execute DOM operations within $(document).ready(); and effectively utilize callback functions for complex content transformation logic.