javascript - 创建一个 div 并放置它

Question

我想创建一些 div 并将其放置在 body 周围。这意味着左、右、上和下。每次客户端通过套接字连接时，我都会创建一个 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;
}

我该怎么做？

Answer 1

一旦你做了一些调整，你的代码就会像你拥有的那样工作。

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>"
    }

}
//});