控制台文本区域自下而上答案

【问题标题】：console textarea bottom to top控制台文本区域自下而上
【发布时间】：2017-06-16 18:18:45
【问题描述】：

这段代码来自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;”抛出一个引用错误“invalid statement left-hand side”

【问题讨论】：

标签： javascript html textarea console.log

【解决方案1】：

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

【讨论】：

【解决方案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);
        }
    }
})();

【讨论】：

【解决方案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

【讨论】：