在JavaScript中的HTML元素中显示console.log()

Question

我编写了一个函数,它将所有内容写入控制台(带console.log(string);).

现在我想"模拟"或在a <p>或a中显示生成的控制台日志<div>.

有谁知道如何做到这一点？

Answer 1

从您问题中的线索,我认为您在浏览器环境中工作.

console是对象上的一个window对象.因此,您可以轻松更换它.以下代码将window.console使用window.console具有该方法的自定义替换浏览器log.该log方法将获取一个字符串并将其附加到具有id的元素myLog

在您的HTML中:

<p id="myLog"></p>

在你的JS中:

window.console = {
  log: function(str){
    var node = document.createElement("div");
    node.appendChild(document.createTextNode(str));
    document.getElementById("myLog").appendChild(node);
  }
}
console.log('hi');
console.log('there');

这是因为您只记录字符串.如果您记录其他内容(例如对象),则可能需要在log方法中添加类型检查,如果它是对象,请JSON.stringify在将其添加到节点之前运行它.