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在哪里放置元素，所以你可以告诉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'
          }
       });
    );
});

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>

Jquery并动态创建html

3 个答案: