Best IT Recipes

How to add text to an existing div with jquery

I want to add text to an existing div when I click the button with id #add. But that does not work.

Here is my code:

$(function () { $('#Add').click(function () { $('<p>Text</p>').appendTo('#Content'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="Content"> <button id="Add" /> </div>

I hope you help me.

+50
jquery html text add
Mar 22 '13 at 22:46
source share
6 answers

You need to define the button text and have valid HTML for the button. I would also suggest using .on for a button click handler

 $(function () { $('#Add').on('click', function () { $('<p>Text</p>').appendTo('#Content'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="Content"> <button id="Add">Add Text</button> </div>

I would also like to make sure that jquery is at the bottom of the page before the closing </body> . This will make it so that you don’t need to have the whole thing wrapped in $(function , but I will do it anyway. If your javascript loading at the end of the page makes it so that the rest of the page loads, there is somewhere slower in your javascript.

+53
Mar 22 '13 at 22:51
source share

Running example:

 //If you want add the element before the actual content, use before() $(function () { $('#AddBefore').click(function () { $('#Content').before('<p>Text before the button</p>'); }); }); //If you want add the element after the actual content, use after() $(function () { $('#AddAfter').click(function () { $('#Content').after('<p>Text after the button</p>'); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="Content"> <button id="AddBefore">Add before</button> <button id="AddAfter">Add after</button> </div>
+10
Mar 22 '13 at 22:51
source share

Your html is invalid. button not a null tag. Try

 <div id="Content"> <button id="Add">Add</button> </div>
+5
Mar 22 '13 at 22:49
source share

we can do this in a simpler way, for example, by adding a function to a button, and by clicking we call this function to add.

 <div id="Content"> <button id="Add" onclick="append();">Add Text</button> </div> <script type="text/javascript"> function append() { $('<p>Text</p>').appendTo('#Content'); } </script>
0
Mar 25 '16 at 10:56
source share

Very easy on my part: -

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function() { $("input").click(function() { $('<input type="text" name="name" value="value"/>').appendTo('#testdiv'); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <div id="testdiv"></div> <input type="button" value="Add" /> </body> </html>
0
May 27 '16 at 17:24
source share

 $(function () { $('#Add').click(function () { $('<p>Text</p>').appendTo('#Content'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="Content"> <button id="Add">Add<button> </div>
0
Jul 08 '18 at 10:24
source share


More articles:


All Articles