创建一个div并放置它

时间:2016-04-11 22:34:11

标签: javascript jquery html css

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

我该怎么做?

2 个答案:

答案 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