создать div и поместить его

Я хочу создать некоторые divs и поместить вокруг тела. Это означает, что слева, справа, вверх и вниз. Я создаю 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; 
}

, как я могу это сделать?

источник

2016-04-11 Moez Ben Ahmed

Не могли бы вы пояснить, что вы имели в виду «поместить вокруг тела»? Кроме того, вы объявили css, который не используется в вашем коде. – DinoMyte

справа, слева, вверх и вниз по экрану. Css - это стиль div, который я хочу создать! –

Ваш код будет работать, как вы его, как только вы сделали несколько изменений.

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

} 
//});

источник

2016-04-11 22:59:27

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

источник

2016-04-11 22:38:17 admcfajn

Вы не ответили на мой вопрос, как я могу разместить их в правильном месте? –

создать div и поместить его

ответ

Смежные вопросы