Question

此代码来自Javascript: console.log to html，我正在试图弄清楚如何让新消息排在最前面而不是一个接一个。

(function() {
    if (!console) {
        console = {};
    }
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function(message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ?
                JSON.stringify(message) :
                String(message)) + '\n';
        } else {
            logger.prepend(message) = logger.innerHTML + message;
        }
    }
})();

“logger.prepend（message）= logger.innerHTML + message;”抛出引用错误“无效语句左侧”

Answer 1

不知道您是否正在寻找JS解决方案，但使用CSS最简单的方法是在position: absolute上使用bottom: 0和#log。演示jsfiddle

Answer 2

上面的解决方案很棒，我只是没有足够的声望点来支持它。如果您希望获得最新消息：

    (function() {
    if (!console) {
        console = {};
    }
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function(message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ?
                JSON.stringify(message) :
                String(message)) + '\n';
        } else {
            return logger.prepend(message);
        }
    }
})();

Answer 3

你需要 - HTML DOM insertBefore() 方法

function myFunction() {
  var newItem = document.createElement("LI");
  var textnode = document.createTextNode("Water");
  newItem.appendChild(textnode);

  var list = document.getElementById("myList");
  list.insertBefore(newItem, list.childNodes[0]);
}

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>Click the button to insert an item to the list.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Example explained:</strong><br>First create a LI node,<br> then create a Text node,<br> then append the Text node to the LI node.<br>Finally insert the LI node before the first child node in the list.</p>

在此处输入您的代码控制台测试：https://codepen.io/pedro404/pen/NWbLRLB

控制台textarea自下而上

3 个答案: