jQuery Add Text To Div Examples
When working with divs in a webpage, divs with static data are ok. But what if you want to add new text to div? In this article, I am going to share very easy way to use jQuery to add text to div. Simple examples follow. So read on to find out more.
How to use jQuery to add text to div
Before we go ahead and start discussing the examples, let’s hold on for a moment and think about what we are trying to achieve. We want to add some custom text to a div. Pretty good, so far. Consider the 2 possibilities below:
- If the existing div does not contain any existing text, then we would expect our new text to show up in this div. Correct? Yes, it is.
- What happens if this div contains existing text/data already? What will happen to such text? What will happen to the new text that we are trying to add?
So because it could be any of the 2 possibilities, you need to determine what’s right for you. And only you can do that based upon the needs of your application. Hence, I am going to discuss both the possibilities. In fact, I am going to share all possibilities with an example for each of them so that you can use whatever your application needs.
Example 1 – Add text to an empty div
<div id="empty_div"></div>
<input type="submit" name="sbt_add2empty" id="sbt_add2empty" value="Add Text to empty DIV">
//This will add text to the empty div
$('#sbt_add2empty').on("click", function(e){
$('#empty_div').text('This is NEW TEXT and it is being added to the empty Div.');
e.preventDefault();
});Example 2 – Add text to a div containing existing text and append the new text to the existing text
<div id="my_div">This is my existing div.</div>
<input type="submit" name="sbt_add_overwrite" id="sbt_add_overwrite" value="Add Text to a DIV and Overwrite">
//This will fill the div with your text if the div does not have any text already. If it does contain any text, it will be overwritten with your new text.
$('#sbt_add_overwrite').on("click", function(e){
$('#my_div').text('This is NEW TEXT');
e.preventDefault();
});Example 3 – Add text to a div containing existing text and overwrite the existing text with new text
<div id="my_div">This is my existing div.</div>
<input type="submit" name="sbt_no_overwrite" id="sbt_no_overwrite" value="Add Text to a DIV and DONT Overwrite, Simply Append">
//This will retain existing div data and simply add your new text to the existing div text.
$('#sbt_no_overwrite').on("click", function(e){
var my_div_existing_content = $('#my_div').text();
$('#my_div').text(my_div_existing_content + 'This is NEW TEXT');
e.preventDefault();
});Complete source code to add custom text to div using jQuery:
<html>
<head>
<title>Examples to add custom text to Div using jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#my_div {
background-color: #DBF0FF;
border: 1px solid #06F;
}
.new_div {
background-color: #FFDF9D;
border: 1px solid #F90;
}
</style>
</head>
<body>
<div class="divs_container">
<div id="empty_div"></div>
<br>
<div id="my_div">This is my existing div.</div>
</div>
<p>
<input type="submit" name="sbt_add2empty" id="sbt_add2empty" value="Add Text to empty DIV">
<input type="submit" name="sbt_add_overwrite" id="sbt_add_overwrite" value="Add Text to the DIV and Overwrite">
<input type="submit" name="sbt_no_overwrite" id="sbt_no_overwrite" value="Add Text to the DIV and DONT Overwrite, Simply Append">
<br>
<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">
</p>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//Ignore this
var divs_container_html = $(".divs_container").html();
//This will add text to the empty div
$('#sbt_add2empty').on("click", function(e){
$('#empty_div').text('This is NEW TEXT and it is being added to the empty Div.');
e.preventDefault();
});
//This will fill the div with your text if the div does not have any text already. If it does contain any text, it will be overwritten with your new text.
$('#sbt_add_overwrite').on("click", function(e){
$('#my_div').text('This is NEW TEXT');
e.preventDefault();
});
//This will retain existing div data and simply add your new text to the existing div text.
$('#sbt_no_overwrite').on("click", function(e){
var my_div_existing_content = $('#my_div').text();
$('#my_div').text(my_div_existing_content + 'This is NEW TEXT');
e.preventDefault();
});
//IGNORE THIS: Reset the divs back to their original state
$('#sbt_reset').on("click", function(e){
$(".divs_container").html(divs_container_html);
e.preventDefault();
});
});
</script>
</body>
</html>Conclusion:
1. If you are absolutely sure that there is no existing data in the div, use the code shown in the 1st example.
2. If you really want to overwrite the existing data with the new data, use the code shown in the 2nd example.
3. If you want to retain the existing data & simply append/add the new data to it, then use the code shown in the 3rd example.
Note:
There is no difference in the syntax used or in the procedure if you want to simply add text to an empty div or overwrite the existing text of a div. It is different only if you want to retain existing content & simply want to add new content on top of it.
That’s it!
Do you know of any other ways to jQuery to add text to div? Feel free to share by commenting below.