我想创建一些div并将它放在身体周围。这意味着左,右,上,下。每次客户端通过套接字连接时我都会创建一个div。这是代码
var parent = document.getElementById("#parent-div")
socket.on("isConnected", function(data) {
// Receive the 'data' and check if 'isConnected' is true
if(data.isConnected == true) {
parent.innerHTML += "<div class='new-div'></div>"
}
});
这是div的风格:
.ZE {
position: fixed;
width: 400px;
height: 100px;
background-color: #73AD81;
overflow: hidden;
border-radius: 20px 60px;
border: 2px solid #965D31;
}
我该怎么做?
答案 0 :(得分:2)
一旦您做了一些调整,您的代码就会像您一样工作。
<强> jsFiddle Demo 强>
首先,您的#
中不需要数字符号(getElementById()
):
应该是:
var parent = document.getElementById("parent-div");
接下来,为要放置它们的位置创建类:
.ZE.left {
top: 50%;
transform: translateY(-50%);
}
.ZE.right {
right: 0;
top: 50%;
transform: translateY(-50%);
}
.ZE.up {
left: 50%;
transform: translateX(-50%);
}
.ZE.down {
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
由您决定如何放置它们。上面只是将它们放置在左/右/上/下的一种方式,可能不是最好的方法,但我的基础是你现有的代码。
最后,您需要在回调函数中逐步添加这些类:
// for demo purposes
var data = {
isConnected: true
},
classes = ['left', 'right', 'up', 'down'];
//socket.on("isConnected", function(data) {
// Receive the 'data' and check if 'isConnected' is true
// loop for demo purposes
for (var i = 0; i < 4; i++) {
if(data.isConnected === true) {
parent.innerHTML += "<div class='ZE " + classes[i] + "'></div>"
}
}
//});
答案 1 :(得分:1)
var newDiv = document.createElement("div");
var parentDiv = document.getElementById("div_to_place_within");
parentDiv.appendChild(newDiv);
newDiv.id = "some_id";
newDiv.className = "some classnames";
createElement&amp;的appendChild