JQuery и создать html на лету

Question

Я пытаюсь показать html-код на лету, используя jquery, и это первый раз, когда я пытаюсь, но я думаю, что у меня что-то не так в моих понятиях.

Вот мой код:

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

Проблема подмигнули как показать этот HTML-код, я думаю, что шоу, когда щелчок, но не

Answer 1

Попробуйте

<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> 

Answer 2

Используйте .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> 

Проверить эту ссылку

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

Answer 3

Проблема заключается в том, что вы создали элементы, стоящие за кулисами и не сказал Jquery, где поместить элементы так что вы можете сказать Jquery, где поместить элементы либо html(); или append();. Как этот пример.

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

Лучшей практикой было бы создать ваши элементы следующим образом.

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