javascript - 如何使元素始终位于结束标记之上

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 的底部我怎样才能用纯 JS 或 Jquery 做到这一点？我需要注入(inject) <p/> #typing-indicator 之前的标签

Answer 1

你可以试试 jQuery .after()

代替:

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

尝试:

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

引用: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>