CODEWITHSUNDEEP
javascriptjqueryhtml
Dragan Marjanovic
Dragan Marjanovic

Reputation: 1287

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

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 ?
        });
    });

Upvotes: 3

Views: 1162

Answers (3)

KBN
KBN

Reputation: 2974

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");

Upvotes: 0

Shawn Chin
Shawn Chin

Reputation: 86894

$("#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.

Upvotes: 5

Sampson
Sampson

Reputation: 268374

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();
  });
});

Upvotes: 4

Related Questions