创建一个div并放置它

Question

我想创建一些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;
}

我怎样才能做到这一点 ？

Answer 1

一旦做了一些调整，您的代码就会像您一样工作。

jsFiddle演示

首先，你的getElementById()不需要数字符号（ # 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>"
    }

}
//});

Answer 2

    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＆appendChild