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

问题是您已经在幕后创建了元素，并且没有告诉 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'
          }
       });
    );
});

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

尝试这个

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