61

I want to add text to an existing div, when I click the Button with the id #add. But this is not working.

Here 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">Add</button>
 </div>

I hope you can help me.

T. Dirks
  • 3,566
  • 1
  • 19
  • 34
JSt
  • 799
  • 2
  • 10
  • 21

6 Answers6

65

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

$(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>

Also I would make sure the jquery is at the bottom of the page just before the closing </body> tag. Doing so will make it so you do not have to have the whole thing wrapped in $(function but I would still do that. Having your javascript load at the end of the page makes it so the rest of the page loads incase there is a slow down in your javascript somewhere.

Derek Brown
  • 4,232
  • 4
  • 27
  • 44
bretterer
  • 5,693
  • 5
  • 32
  • 53
  • 2
    The jquery `.replaceWith()` method removes content from the DOM and inserts new content in its place with a single call. `$( "div.second" ).replaceWith( "

    New heading

    " );` [jquery api](http://api.jquery.com/replaceWith/)     – open-ecommerce.org Oct 29 '13 at 11:13
11

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>
Zach dev
  • 1,610
  • 8
  • 15
5

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

<div id="Content">
   <button id="Add">Add</button>
</div>
Musa
  • 96,336
  • 17
  • 118
  • 137
0

we can do it in more easy way like by adding a function on button and on click we call that function for append.

<div id="Content">
<button id="Add" onclick="append();">Add Text</button>
</div> 
<script type="text/javascript">
function append()
{
$('<p>Text</p>').appendTo('#Content');
}
</script>
Amit Joshi
  • 456
  • 1
  • 8
  • 21
0

Very easy from My side:-

<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>
Pavan
  • 1,219
  • 13
  • 15
0

$(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>
prakash tyata
  • 39
  • 2