How to add text to an existing div with jquery

jquery html text add
JSt picture JSt · Mar 22, 2013 · Viewed 164.5k times · Source

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:

I hope you can help me.

Answer

bretterer picture bretterer · Mar 22, 2013

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.

Related questions

Add text to textarea - Jquery

How can I add text from a DIV to a textarea? I have this now: $('.oquote').click(function() { $('#replyBox').slideDown('slow', function() { var quote = $('.container').text(); $('#replyBox').val($('#replyBox').val()+quote); // Animation complete. }); });

Read More
Change text (html) with .animate

I am trying to animate the html part of a tag ( <font id="test" size="7">This Text!</font> ) using jQuery's Animate function, like so: $("#test").delay(1500).animate({text:'The text has now changed!'},500); However nothing …

Read More
Convert HTML to plain text in contentEditable

I have a contentEditable and I strip the formatting of pasted content on('paste') by catching the event. Then I focus a textarea, paste the content in there, and copy the value. Pretty much the answer from here. The problem …

Read More