Putting text into a DIV element using ID's and JQUERY?

Question

I have been looking all over for a way to do this but most methods seem overly long or complex. I have a button and an invisible <div> , on the press of a button I would like text to be written into the <div> using jquery.

Say this is my html including the <div> element:

<button id="buttonid"></button>

<div id="invisible"></div>

My jquery would start something like this?

    $(document).ready(function(){
        $("#buttonid").click(function(){
           //WHAT COMES HERE? TO ADD TEXT TO #invisible ?
        });
    });

Answer 1

$("#buttonid").click(function(){
     $("#invisible").text("your text").show();
});

Notes:

• I've added .show() , assuming that the div starts off as being not visible
• Use .html() instead of .text() if you're planning to insert HTML markup instead of plain text.

Answer 2

If you just want to change the text/html of the div, use $.text() or $.html() .

$(document).ready(function(){
    $("#buttonid").on("click", function(){
       $("#invisible").html('Foo');
    });
});

Of course, it's still hidden at this point, but you could reveal it using any one of the revealing methods, such as $.show() , or $.fadeIn() , etc.:

$(document).ready(function(){
  $("#buttonid").on("click", function(){
    $("#invisible").html('Foo').fadeIn();
  });
});

Answer 3

If you don't want the exiting content of the div to change, use :

$("#invisible").append("your text");

otherwise

$("#invisible").text("your text");
//OR
$("#invisible").html("your text");