jquery and click function

Question

Hi,

<script type="text/javascript">
$(document).ready(function(){
    $("#changeText").click(function() {
        $("#textBox").html("<div>text text</div>");
    });
});
</script>

How make that if i push on #changeText twice or more, i get two (or more) text text

Answer 1

don't use .html() which overwrites the entire innerHTML structure.

To append new html markup use .append() or .appendTo()

$(document).ready(function(){
  $("#changeText").click(function() {
      $("#textBox").append("<div>text text</div>");
  });
});

or in a more jQuery'ish chaining way:

$('<div>text text</div>').appendTo($('#textBox')); // .css().fadeOut().animate().etc()

Ref.: .append(), .appendTo()

Answer 2

You need to create div inside #textBox and then

$("#changeText").click(function() {
    $("#textBox div").append("text");
});

EDIT:

$("#changeText").click(function() {
    if ( $("#textBox div").length()>0)
          $("#textBox div").append("text");
    else
         $("#textBox").append("<div>text</div>");
});