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的bg颜色改为绿色，这样可以在演示中看到）

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作为tigger

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

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

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

通过javascript创建容器

5 个答案: