CODEWITHSUNDEEP
jquery
user2501504
user2501504

Reputation: 311

Jquery and create html on the fly

I try to show html code in the fly using jquery and it´s the first time I try but I think I have something wrong in my concepts.

Here is my code:

<script>    
jQuery(document).ready(function() {    
   jQuery("#popup").click(function() {    
      $("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")
   });        
});    
</script>

The problem it´s how show this html code , i think show when click but no

Upvotes: 1

Views: 4561

Answers (3)

iConnor
iConnor

Reputation: 20189

The problem is that you have created the elements behind the scenes and haven't told jQuery where to put the elements so you you can tell jQuery where to put the elements with either html(); or append();. Like this example.

  jQuery("#popup").click(function() {    
      $(this).append("<div class=foo id=bar style='color:white; bgcolor:blue; font-size:12pt'></div>")
  });

A better practice would be to create your elements like this.

$('#popup').click(function() {
    $(this).append(
       $('<div>', {
          'class': 'foo',
          id: 'bar',
          css: {
             color: 'white',
             background: 'blue',
             fontSize: '12pt'
          }
       });
    );
});

Upvotes: 2

Nitin Varpe
Nitin Varpe

Reputation: 10694

Use .append()

<script>

jQuery(document).ready(function() {

jQuery("#popup").click(function() {

$("#SomeDIv").append("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")



});


});

</script>

Check this link

http://jsfiddle.net/tovic/2CueT/

Upvotes: 1

Amit
Amit

Reputation: 15387

Try this

<script>

jQuery(document).ready(function() {
    jQuery("#popup").click(function() {
        $("#bar").show();
    });
    jQuery('body').bind('click keyup', function () {
            $("#bar").hide();
        });
});

</script>
<div class="foo" id="bar" style='color:white;bgcolor:blue;font-size:12pt;display:none;'></div>

Upvotes: 0

Related Questions