Using jQuery Add HTML To Div
So far, we have seen lot of div manipulation stuff. We have added divs, added div to div, added text to div. etc. One of the key things would be to adding html to div. This may be immensely used when you try to create a specific feature where you would like to show the html source for display purposes. This could also be used in applications like next-generation web editors or online HTML editors, etc. In this article, I am going to share with you very simple ways to use jQuery to add html to div. Examples follow.
How to use jQuery to add html to div
Let’s see how to do this by means of an example. Assume that we have a div with ID “my_div”. Let’s assume that you have some random HTML that you would like to add to this div. Well so far, no confusion. But before we actually look at how we can add the html content to our target div, we need to consider some possibilities. They are:
- If the existing div does not contain any existing html, then we would expect our new html to show up in this div. Correct? Yes, it is.
- What happens if this div contains existing html/data already? What will happen to such html? What will happen to the new html 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. In order to cover all possibilities, 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 html to an empty div
<div id="empty_div"></div>
<input type="submit" name="sbt_add2empty" id="sbt_add2empty" value="Add HTML to empty DIV">
//This will add text to the empty div
$('#sbt_add2empty').on("click", function(e){
$('#empty_div').html('<p>This is PARAGRAPH.</p>');
e.preventDefault();
});Example 2 – Add html to a div containing existing html and append the new html to the existing html
<div id="my_div">This is my existing div.</div>
<input type="submit" name="sbt_add_overwrite" id="sbt_add_overwrite" value="Add HTML content to 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){
//alert( $('#my_div').html());
$('#my_div').html('<p>This is PARAGRAPH.</p>');
e.preventDefault();
});Example 3 – Add html to a div containing existing html and overwrite the existing html with new html
<div id="my_div">This is my existing div.</div>
<input type="submit" name="sbt_no_overwrite" id="sbt_no_overwrite" value="Append HTML Content to 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_html = $('#my_div').html();
$('#my_div').html(my_div_existing_html + '<p>This is PARAGRAPH.</p>');
e.preventDefault();
});Conclusion:
1. If you are absolutely sure that there is no existing html in the div, use the code shown in the 1st example.
2. If you really want to overwrite the existing data with the new html, 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 html to an empty div or overwrite the existing html of a div. It is different only if you want to retain existing content & simply want to add new content on top of it.
Full source code to use jQuery to append html to div:
<html>
<head>
<title>Examples for adding html 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 HTML to empty DIV">
<input type="submit" name="sbt_add_overwrite" id="sbt_add_overwrite" value="Append HTML to DIV and Overwrite">
<input type="submit" name="sbt_no_overwrite" id="sbt_no_overwrite" value="Append HTML to 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').html('<p>This is PARAGRAPH.</p>');
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){
//alert( $('#my_div').html());
$('#my_div').html('<p>This is PARAGRAPH.</p>');
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_html = $('#my_div').html();
$('#my_div').html(my_div_existing_html + '<p>This is PARAGRAPH.</p>');
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>Your Turn!
Do you know of any other ways to use jQuery to add html to div? Feel free to share by commenting below.
Hi,
thanks for the good explanation.
The headings of the example code snippet 2 and 3 are swapped.
Greetz
November 19, 2020 at 2:01 pm