Question

Simple example:

$(document).ready(function(){
 $('body').css({'background-color': '#dddddd', 'font-size': '12pt'});
 $('table tr:odd').addClass('rowShaded');
 $('<p> Oh my learning jQuery is so fun </p>').addClass('myP');
 $('#myButton').click(function() {
  alert($(this).attr("value")); //should display the name of the button
     $('#myTestTable').toggle();
    });


});

$('<p> Oh my learning jQuery is so fun </p>').addClass('myP');

Everything is working fine except that line. Shouldn’t it actually show a new paragraph on my page with that text? I dont see it, all it shows is a table in my html and button that I can toggle. I thought you can add HTML elements and jQuery places it in the html file ? My CSS is simple for that element:

.myP{
font-family:verdana;
color:red;
}

Answer 1

Well, you have to tell jQuery where it should be shown in your page, using e.g. appendTo().

Example:

('<p> Oh my learning jQuery is so fun </p>')
.addClass('myP')
.appendTo('#mydiv');

appends the HTML to the element with ID mydiv (meaning the p element is now the last child of #mydiv).