Question

这是代码段

function send(){
  var message = document.getElementById('input').value;
  document.getElementById('output').innerHTML += `<p>${message}</p>`;
  document.getElementById('output').scrollTop = output.scrollHeight;
}

#output{
  overflow: auto;
  height: 150px;
  background-color: red;
}

#typing-indicator{
  height: 15px;
  background-color: green;
}

<div id="output">
<div id="typing-indicator"></div>
</div>
<input id="input"/>
<button id="send" onclick="send()">SEND</button>

我希望#typing-indicator始终位于#output的底部如何使用Pure JS或Jquery做到这一点？我需要在<p/>

之前插入#typing-indicator标记

Answer 1

您可以使用insertBefore API在typing-indicator元素之前添加消息。

function send(){
  var message = document.getElementById('input').value;
  var messageElm = document.createElement('p');
  messageElm.innerHTML = message;
 
  var outputElm = document.getElementById('output');
  var indicatorElm = document.getElementById('typing-indicator');
  outputElm.insertBefore(messageElm, indicatorElm);
}

#output{
  overflow: auto;
  height: 150px;
  background-color: red;
}

#typing-indicator{
  height: 15px;
  background-color: green;
}

<div id="output">
<div id="typing-indicator"></div>
</div>
<input id="input"/>
<button id="send" onclick="send()">SEND</button>

Answer 2

您可以尝试jQuery .after()

代替：

document.getElementById('output').innerHTML += `<p>${message}</p>`;

尝试：

$('#typing-indicator').after(`<p>${message}</p>`)

ref：http://api.jquery.com/after/

function send(){
  var message = document.getElementById('input').value;
  $('#typing-indicator').after(`<p>${message}</p>`);
  $('#output').scrollTop();
}

#output{
  overflow: auto;
  height: 150px;
  background-color: red;
}

#typing-indicator{
  height: 15px;
  background-color: green;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div id="output">
<div id="typing-indicator"></div>
</div>
<input id="input"/>
<button id="send" onclick="send()">SEND</button>

Answer 3

所以您发送的功能必须如下

function send(){
var p = document.createElement("p");   // Create a <button> element
p.innerHTML = document.getElementById('input').value;;  
  document.getElementById('output').insertBefore(p,document.getElementById('typing-indicator')) ;
  document.getElementById('output').scrollTop = output.scrollHeight;
}

在此函数中，您将创建p元素，然后使用将元素先插入另一个元素的<div id="typing-indicator"></div>在insertBefore元素之前注入您可以通过以下link

查看其文档

Answer 4

使用新容器保存输入消息，并在调用innerHTML时将新消息添加到send()之前。

function send(){
  var message = document.getElementById('input').value;
  document.getElementById('output-content').innerHTML = `<p>${message}</p>` + document.getElementById('output-content').innerHTML;
  document.getElementById('output').scrollTop = output.scrollHeight;
}

#output{
  overflow: auto;
  height: 150px;
  background-color: red;
}

#typing-indicator{
  height: 15px;
  background-color: green;
}

<div id="output">
<div id="typing-indicator"></div>
<div id="output-content"></div>
</div>
<input id="input"/>
<button id="send" onclick="send()">SEND</button>

Answer 5

使用Flexbox，您可以让CSS为您完成工作。将#output设为具有1：N行的flexbox列容器，并为子元素#typing-indicator赋予比注入的<p>更低的顺序。

制造#typing-indicator order: 2和注入的<p>的{{1}}会迫使它们在order: 1上方，无论您注入什么……

代码：

#typing-indicator

#output           { display: flex; flex-direction: column } /* column of 0:N rows */
#output>p         { order: 1 }
#typing-indicator { order: 2 }
/* has lower order than <p>'s and gets forced to the end of the FBL parent */

如何使元素始终位于结束标记

5 个答案: