随着 p 标签的接近，向下移动元素

Question

这基本上是一个聊天布局，我希望按钮和输入元素在消息传递时自动向下移动。但是当我尝试这样做时，元素不会向下移动，它们只会留在原处。

我希望输入和按钮标签随着消息的接近而向下移动。

jQuery 接受了。

var p = document.createElement('p');

var message = document.querySelector('#messages');

var button = document.querySelector('#typeb');

button.addEventListener('click', function() {

  p = document.createElement('p');

  p.setAttribute('id', 'user');

  var txt = document.createTextNode('This is a message sent.');

  p.appendChild(txt);

  message.appendChild(p);

  reply();

});

function reply() {

  p = document.createElement('p');

  p.setAttribute('id', 'sent');

  var txt = document.createTextNode('This is a message sent. jwejfhwewfwwef \n Hello Priyal');

  p.appendChild(txt);

  message.appendChild(p);

}

#box {

  position: relative;

  text-align: center;

}

#typer {

  position: relative;

  transform: translate(50%, 100vh);

}

#typeb {

  position: relative;

  transform: translate(160%, 100vh);

}

#user {

  min-width: 150px;

  min-height: 40px;

  float: right;

  display: block;

  clear: both;

  text-align: right;

  background-color: aqua;

  border: 1px solid aqua;

  border-bottom-right-radius: 0px;

  border-radius: 30px 0px 30px 30px;

}

#sent {

  min-width: 150px;

  min-height: 40px;

  float: left;

  display: block;

  clear: both;

  background-color: grey;

  border: 1px solid grey;

  border-bottom-left-radius: 0px;

  border-radius: 0px 30px 30px 30px;

}

<div id="box">

  <div id="messages">

  </div>

  <input type="text" id="typer">

  <button id="typeb">Say it</button>

</div>

Answer 1

var p = document.createElement('p');var message = document.querySelector('#messages');var button = document.querySelector('#typeb');button.addEventListener('click', function() {&nbsp; p = document.createElement('p');&nbsp; p.setAttribute('id', 'user');&nbsp; var txt = document.createTextNode('This is a message sent.');&nbsp; p.appendChild(txt);&nbsp; message.appendChild(p);&nbsp; reply();});function reply() {&nbsp; p = document.createElement('p');&nbsp; p.setAttribute('id', 'sent');&nbsp; var txt = document.createTextNode('This is a message sent. jwejfhwewfwwef \n Hello Priyal');&nbsp; p.appendChild(txt);&nbsp; message.appendChild(p);}#box {&nbsp; position: relative;&nbsp; text-align: center;}#typer {&nbsp; position: fixed;&nbsp; &nbsp;bottom:0;}#typeb {&nbsp; position: fixed;&nbsp; bottom:0;}#user {&nbsp; min-width: 150px;&nbsp; min-height: 40px;&nbsp; float: right;&nbsp; display: block;&nbsp; clear: both;&nbsp; text-align: right;&nbsp; background-color: aqua;&nbsp; border: 1px solid aqua;&nbsp; border-bottom-right-radius: 0px;&nbsp; border-radius: 30px 0px 30px 30px;}#sent {&nbsp; min-width: 150px;&nbsp; min-height: 40px;&nbsp; float: left;&nbsp; display: block;&nbsp; clear: both;&nbsp; background-color: grey;&nbsp; border: 1px solid grey;&nbsp; border-bottom-left-radius: 0px;&nbsp; border-radius: 0px 30px 30px 30px;}<div id="box">&nbsp; <div id="messages">&nbsp; </div>&nbsp; <input type="text" id="typer">&nbsp; <button id="typeb">Say it</button></div>