Как мне прикрепить div к правой или левой стороне другого div, используя Javascript?

Question

Я пытаюсь создать смоделированное окно чата, которое требует, чтобы чаты появлялись слева и справа от div. Каждый из этих чатов также является разделом. Я не могу понять, как добавить div к правой стороне внешнего div. В моем коде я добавил текст к div, который затем хочу добавить к внешнему div. Я хочу сделать это с ванилью Javascript, если возможно.

function pressEnter() {
    if (event.keyCode === 13) {
        event.preventDefault;
        // get text
        var text = document.getElementById("client_text_area").value;
        // create new div
        var newdiv = document.createElement('div');
        newdiv.id = "human_chat"
        // create text node to append
        text = document.createTextNode(text);
        newdiv.appendChild(text);
}

Answer 1

Я бы поставил это в комментарии под ответом Гершома, но поскольку я еще не могу комментировать, я помещаю его в ответ.

Как поделился Гершом, используйте CSS для стилизации ваших div . Вы можете добавлять классы в свой div при их создании с помощью JavaScript, как показано ниже:

newdiv.classList.add('class-name');

Answer 2

Использование left: 0% позиционирует дочерний элемент внутри своего родителя, обнимая его левую сторону. Использование left: 50% помещает левую сторону этого дочернего элемента в самую середину его родителя. Итак, мы видим, что left: 100% будет располагать дочерний элемент слева от самого правого края его родителя. Точно так же right: 100% можно использовать для размещения дочерних элементов в left их родителя:

.parent {
  position: absolute;
  left: 50%; top: 50%;
  width: 100px; height: 100px;
  margin-left: -50px; margin-top: -50px;
  background-color: #900;
}
.parent > .child {
  position: absolute;
  width: 50px; height: 50px;
  top: 25px;
  background-color: #090;
}

/* These are the rules that should interest you! */
.parent > .child.left { right: 100%; }
.parent > .child.right { left: 100%; }

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
</div>

Чтобы установить эти значения через javascript, вы можете изменить значения на yourElem.style.

Например, если вы wi sh, чтобы newdiv оставался справа от своего родителя, вы можете сделать:

newdiv.style.position = 'absolute';
newdiv.style.left = '100%';