这是片段
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
之前的标签
最佳答案
你可以试试 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>
关于javascript - 如何使元素始终位于结束标记之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56618669/