Question

所以我有一个div（id为“thecolor2”）我要追加到无序列表，但在我追加它之前，我想将它的背景颜色设置为一个值为十六进制的变量码。但是，出于某种原因，它没有颜色。

这是CSS：

#thecolor2{
    height: 50px;
    width: 50px;
    border-radius: 100px;
    border: 1px solid yellow;
    position: relative;
    bottom: 635px;
}

她是HTML：

<ul id = "allposts"></ul>

这是JS：

var thestream = document.getElementById('allposts');
var oneofpost = document.createElement('li');
var thecolor2 = document.createElement('div');
thecolor2.id = "thecolor2";
$("#thecolor2").css("background-color", color);
thestream.appendChild(oneofpost);
thestream.appendChild(thecolor2);

Answer 1

您无法使用jQuery ID选择器来匹配尚未添加到文档树的节点。你可以简单地使用plain DOM来设置它的内联CSS样式：

thecolor2.style.backgroundColor = color

Answer 2

正如Carlo在另一个答案中所描述的那样，您不能使用jQuery选择器来选择尚未添加的元素。但是，您可以通过执行以下操作将创建的DOM元素转换为jQuery对象：

var thecolor2 = $(document.createElement('div'));

但是，如果你打算使用jQuery，那么我建议用jQuery编写所有东西，否则坚持使用纯JavaScript来处理所有事情。

的jQuery

var thestream = $('#allposts');
var oneofpost = $('<li></li>');
var thecolor2 = $('<div></div>');
thecolor2.prop('id', "thecolor2")
         .css({
             backgroundColor: color
         }).appendTo(oneofpost);
thestream.append(oneofpost);

请参阅jsFiddle

的JavaScript

var thestream = document.getElementById('allposts');
var oneofpost = document.createElement('li');
var thecolor2 = document.createElement('div');
thecolor2.id = "thecolor2";
thecolor2.style.backgroundColor = color;
oneofpost.appendChild(thecolor2);
thestream.appendChild(oneofpost);

请参阅jsFiddle

此外，我假设您正在尝试将列表项追加到ul，因此我使用appendChild更正了您的代码。

在追加孩子之前添加css

2 个答案:

的jQuery

的JavaScript