使用jQuery創建的Div不顯示在屏幕上

我正在使用在線教程來學習一些jQuery，因爲我被告知如果我想構建網站，那就是要走的路。我知道合理數量的html，javascript和css。我基本上從在線教程中複製了這個jQuery腳本，所以腳本不會錯。所以我的假設是，我在我的html文檔的錯誤位置寫腳本。有任何想法嗎？提前感謝任何答案。使用jQuery創建的Div不顯示在屏幕上

另外，我被告知這創建了一個新的div。我現在開始對此有所懷疑。如果這是錯誤的，你能讓我知道這是如何正確完成的。乾杯。

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href = "Jquery.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
     jQuery('<div/>', { 
      id: 'box', 
      css: { 

       fontWeight: 500, 
       color: 'green' 

      }, 
      click: function(){ 
       alert('You clicked the box'); 
      } 

     }); 
    </script> 
</head> 

<body> 


</body> 
</html>

來源

2013-08-05 Greg Peckory

您需要將該div添加到DOM。一種方法是使用jQuery的appendTo()方法：

Working Demo

jQuery('<div/>', { 
    id: 'box', 
    css: { 
     fontWeight: 500, 
     color: 'green' 
    }, 
    click: function() { 
     alert('You clicked the box'); 
    } 

}).appendTo('body');

而且，包裝一個$(document).ready(function() {...})內jQuery代碼的最佳實踐。這將確保您的代碼運行時，您需要與之交互的DOM元素將呈現。你可以在這裏閱讀更多關於：http://api.jquery.com/ready

來源

2013-08-05 16:29:58 cfs

非常感謝答案。還有一件事我很好奇。是否可以在jQuery中設置背景顏色，寬度和高度以及fontWeight和color，而不是在.css文件中。 –

很高興幫助！祝你好運jQuery :)您可以使用css（）函數設置大多數（所有？）CSS屬性：http://api.jquery.com/css/。你可能也想看看addClass和removeClass（）以及：http://api.jquery.com/addClass/ http://api.jquery.com/removeClass/ – cfs

我不是jquery的專家，但是這看起來與我通常處理的不同。我用更簡單的常用術語做了同樣的事情，可能有更快的方式做到這一點，但這對我的本地設置起作用..

編輯：看着接受的答案似乎沒有必要重寫所有..哦以及

<!DOCTYPE html> 
<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 

<body> 
<script> 
    $('body').html('<div id = "box">123</div>'); 
    $('#box').css('color','green'); 
    $('#box').css('font-weight','500'); 

    $('#box').click(function(){ 
     alert('You clicked here'); 
    }); 
</script> 
</body> 
</html>

來源

2013-08-05 16:53:19 mickadoo

使用jQuery創建的Div不顯示在屏幕上

回答

相關問題