Jquery 并即时创建 html

Question

我尝试使用jquery动态显示html代码，这是我第一次尝试，但我认为我的概念有问题。

这是我的代码:

<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

问题是您已经在幕后创建了元素，并且没有告诉 jQuery 将元素放置在何处，因此您可以使用 html(); 告诉 jQuery 将元素放置在何处或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'
          }
       });
    );
});