通過javascript創建容器

Question

我試圖通過javascript創建容器並設置CSS屬性。

由於某種原因，下面的代碼不起作用。

JS

var maincontainer = $('#maincontainer'); 
var tablecontainer = $('<div/>',{'class':'tablecontainer'}); 
maincontainer.append(tablecontainer); 

CSS

#maincontainer{ 
    background-color:black; 
    width:500px; 
    height:200px; 
} 
#tablecontainer{ 
    background-color:black; 
    width:500px; 
    height:200px; 
} 

Answer 1

JS

var maincontainer = $('#maincontainer'); 
var tablecontainer = $('<div class="tablecontainer" />').appendTo(maincontainer); 

CSS

#maincontainer{ 
    background-color:black; 
    width:500px; 
    height:200px; 
} 
.tablecontainer{ 
    background-color:black; 
    width:500px; 
    height:200px; 
} 

Answer 2

試試這個：

var maincontainer = $('#maincontainer'); 
var tablecontainer = $('<div/>'); 
tablecontainer.addClass('tablecontainer'); 
maincontainer.append(tablecontainer); 

的CSS

#maincontainer{ 
    background-color:black; 
    width:500px; 
    height:200px; 
} 
.tablecontainer{ 
    background-color:black; 
    width:500px; 
    height:200px; 
} 

Answer 3

改變class到id並能正常工作：http://jsfiddle.net/7wkg4/ （也改變了新的div綠色的背景顏色，以便它可以在演示中看到）

Answer 4

您html應該是：

<div id="maincontainer"></div> 

爲你的CSS，我修改與較小的寬度和高度表容器以及顏色，這樣就可以分辨出來：

#maincontainer{ 
    background-color:black; 
    width:500px; 
    height:200px; 
} 
#tablecontainer{ 
    background-color:blue; 
    width:400px; 
    height:150px; 
} 

爲您的JS/jQuery的，這是你應該怎麼做它：

var maincontainer = $('#maincontainer'); 
var tablecontainer = '<div id="tablecontainer"></div>'; 
maincontainer.append(tablecontainer); 

Answer 5

我使用$（文件）。就緒作爲跳跳虎

$(document).ready(
    function(){ 
     $('<div/>',{ 
    'id':'tablecontainer' 
}).appendTo('#maincontainer'); 
    }); 

http://jsfiddle.net/7wkg4/4/

http://jsfiddle.net/7wkg4/5/