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

どのように置くか。上記は、左/右/上/下を配置する方法の1つにすぎず、その最善の方法ではないかもしれませんが、既存のコードに基づいています。

最後に、あなたは、増分、またはお使いのコールバック関数では、これらのクラスを追加したいと思う：

// 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