用y强制div始终显示最新（div的底部）

Question

I have created an action-log which is supposed to keep you up to date about your actions. So everytime you click on the button it shows you what you just did, but the problem is that it won't show the newest message automatically. Is it possible to show the newest message everytime you click on the button?

JSfiddle: https://jsfiddle.net/a8ey2ucm/1/

<div id="log">

</div>

<button onclick="actionBtn();">
  Click here
</button>

function actionBtn()
{
    var log = document.getElementById('log');
  var action = document.createElement("p");
  var actionNode = document.createTextNode("You have rolled");

  action.appendChild(actionNode);
  log.appendChild(action);
} 

Answer 1

I guess there are countless answers for this on the web. However

function actionBtn()
{
    var log = document.getElementById('log');
    var action = document.createElement("p");
    var actionNode = document.createTextNode("You have rolled");

    action.appendChild(actionNode);
    log.appendChild(action);

    log.scrollTop = log.scrollHeight;
}