通过javascript创建容器

我试图通过javascript创建容器并设置css属性

由于某些原因，下面的代码不起作用

js

js

试试这个：

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

---

将

class

更改为

id

，并且工作正常： （还将新div的bg颜色更改为绿色，以便在演示中看到）

您的html应该是：

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

对于js/jquery，您应该这样做：

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

var maincontainer=$（“#maincontainer”）；
var tablecontainer=''；
maincontainer.append（tablecontainer）；

我使用$（文档）。准备好跳跳虎了吗

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

$（文档）。准备好了吗(
函数（）{
$('',{
“id”：“tablecontainer”
}).appendTo（“#主容器”）；
});

---

不应该是

.tablecontainer

而不是

#tablecontainer

您需要的是类选择器而不是id选择器。@PSL将其作为答案发布。@PSL:这不起作用。您如何判断它不起作用？两个元素的CSS是相同的。你是如何验证的？它确实有效。如果你只是看着它（而不是检查它），那么一看，你怎么知道它在那里？它们有完全相同的样式。不同的样式显示了@PSL提供的修复程序的效果：根据您的信息，它应该是带有“#”的ID，而不是带有“.”的类，因为您在css中将它定义为ID。

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

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

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

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

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

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