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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<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.
j Like This Article? Spread The Word!
a You May Also Like
jQuery Check If Div Is Empty Examples
K Continue Reading E Preview w Try Demo
jQuery Check If Div Is Empty Examples
When working with Divs and jQuery, there might have been a situation when you needed to know dynamically if any given div contains any content at all or not. Based upon this, you might want to trigger an action. So in this article, I am going to share easy ways to find out if a Div is empty or not by means of easy to follow examples. Check out the Demo to see how it works in real time. How To Check If Div Is Empty Using …
w Try Demo K Continue Reading-
jQuery Change Select Options Examples
K Continue Reading E Preview w Try Demo
jQuery Change Select Options Examples
Form element manipulation using jQuery can be of immense help when working with forms. As such, it is desirable to know if the options of a select dropdown list can be changed or not. Well, the answer is yes! We can dynamically change the options of a select dropdown. We can remove existing options (if any) and then add new options dynamically. So this article covers the simple ways in which we can change or refresh the options of a select list using jQuery. How To …
w Try Demo K Continue Reading 
jQuery Find Value In Array Examples
K Continue Reading E Preview w Try Demo
jQuery Find Value In Array Examples
Talking about arrays in jQuery, it can be really helpful to know if a value exists in an array or not. That said, in this article, I am going to share examples on how to find if a specific value exists in an array or not using jQuery. Try the demo to see how it works in real time. How To Find If A Value Exists In Array Or Not Using jQuery Let's assume that we have an array of fruits. Now we would like to search …
w Try Demo K Continue Reading
m Never Miss A Post
Sign up for Newsletter
from Extreme Web Designs
We will send you FREE periodical updates whenever we publish a new article so that you can remain on top of technology. We will NEVER send unsolicited email. That’s our GUARANTEE !!!
f About Author: Rocky Dev
