Last updated: 10th January 2025
In a previous article, I explained how to dynamically add and remove HTML elements using jQuery. This feature is crucial for enhancing web page interactivity. However, many readers have asked how to dynamically add text to an existing element, such as a DIV. This article addresses those questions and provides a comprehensive guide on adding text to HTML elements using jQuery.In this article, I will focus on adding text to elements using jQuery. There are two separate jQuery methods to accomplish this: .appendTo() and .append(). Both methods yield similar results, but their usage differs slightly. Let's explore these methods in action.
By the way, you can use plain JavaScript to add or append text a DIV element.
Add text using jQuery .appendTo() Method
Syntax:
$(content).appendTo(selector) // The content to append (or add) to an element.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<p>Click the button to add text to a DIV!</p>
<div id='myProfile'>
<input type='button' id='btAdd' value='Add Text' />
</div>
</body>
<script>
$(document).ready(function () {
$('#btAdd').click(function () {
AddText();
});
function AddText() {
let rndValue;
// GENERATE A RANDOM NUMBER (BETWEEN 1 AND 50) FOR EVERY BUTTON CLICK.
rndValue = Math.floor((Math.random() * 50));
// NOW ADD THE VALUE (RANDOM NUMBER) TO THE DIV ELEMENT.
$('<p>' + rndValue + '</p>').appendTo('#myProfile');
}
});
</script>
</html>The jQuery .appendTo() method will add or append a text or any value to an element. In the above script, I have defined the text before the method, followed by adding the values to a DIV element named myProfile.
jQuery .append() Method
The jQuery .append() method is used to insert content at the end of the selected elements. This method is particularly useful when you want to add new elements or text to an existing element.
Syntax:
append(param1, param2, ...) // The parameters are a set of nodes.
Example:
I am extending the above example. In the 1st example (above), I have used the appendTo() method to add some randomly added numbers to a DIV element.
Now in this example, I'll iterate (loop) through each value (numbers) in the DIV element and add the result to another element using the append() method.
➡️ Generate Random Words with a brief definition
<!DOCTYPE html>
<html>
<head>
<title>jQuery appendTo() and append() methods</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<h1>Using jQuery appendTo() and append() methods</h1>
<p>Click the add text to the DIV (appendTo() method)</p>
<div id='myProfile'>
<input type='button' id='btAdd' value='Add Text' />
</div>
<!-- -------- -->
<p>Click the button to retrieve all data from the above the DIV and "append" the data to the P element. (append() method)</p>
<input type="submit" id="btSubmit" value="Click to append" />
<p id="displayResult"></p>
</body>
<script>
$(document).ready(function () {
$('#btAdd').click(function () {
AddText();
});
function AddText() {
let rndValue;
// GENERATE A RANDOM NUMBER (BETWEEN 1 AND 50).
rndValue = Math.floor((Math.random() * 50));
// ADD THE NUMBER TO THE DIV ELEMENT.
$('<p>' + rndValue + '</p>').appendTo('#myProfile');
}
$('#btSubmit').click(function () {
$('#displayResult').html('');
let pro = '';
// Iterate through the DIV and read its contents.
$('#myProfile').each(function () {
pro += $(this).text();
});
$('#displayResult').append(pro); // append or add values.
});
});
</script>
</html>Simple, isn't it? This article demonstrates how to add text to pre-defined or dynamically created elements on a web page. It's especially helpful for beginners, as it covers two essential jQuery methods: .appendTo() and .append(). While these methods share some similarities, their usages differ slightly.