Javascript：console.log到html

我想写的console.log输出到一个div层。

例如：

document.write(console.log(5+1)); //Incorrect, random example 

有人可以给我一个解决我的问题？

谢谢。

编辑：

我的意思是，例如：

 console.log("hi"); 

并在屏幕上显示输出“hi”。

注意：例如： http : //labs.codecademy.com/# : workspace

Answer 1

您可以覆盖console.log()的默认实现

 (function () { 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) : message) + '<br />'; } else { logger.innerHTML += message + '<br />'; } } })(); 

演示： 小提琴

Answer 2

对@ arun-p-johny的轻微改进回答：

在html中，

 <pre id="log"></pre> 

在js中，

 (function () { var old = console.log; var logger = document.getElementById('log'); console.log = function () { for (var i = 0; i < arguments.length; i++) { if (typeof arguments[i] == 'object') { logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />'; } else { logger.innerHTML += arguments[i] + '<br />'; } } } })(); 

开始使用：

 console.log('How', true, new Date()); 

Answer 3

创build一个输出

 <div id="output"></div> 

使用JavaScript写入

 var output = document.getElementById("output"); output.innerHTML = "hello world"; 

如果你想要处理更复杂的输出值，你可以使用JSON.stringify

 var myObj = {foo: "bar"}; output.innerHTML = JSON.stringify(myObj); 

Answer 4

Arun P Johny的答案更先进，我来得晚了一点 。 他的解决scheme不处理多个console.log()参数，并且不能访问原始函数。

这是我的版本：

 (function (logger) { console.old = console.log; console.log = function () { var output = "", arg, i; for (i = 0; i < arguments.length; i++) { arg = arguments[i]; output += "<span class=\"log-" + (typeof arg) + "\">"; if ( typeof arg === "object" && typeof JSON === "object" && typeof JSON.stringify === "function" ) { output += JSON.stringify(arg); } else { output += arg; } output += "</span>&nbsp;"; } logger.innerHTML += output + "<br>"; console.old.apply(undefined, arguments); }; })(document.getElementById("logger")); // Testing console.log("Hi!", {a:3, b:6}, 42, true); console.log("Multiple", "arguments", "here"); console.log(null, undefined); console.old("Eyy, that's the old and boring one."); 

 body {background: #333;} .log-boolean, .log-undefined {color: magenta;} .log-object, .log-string {color: orange;} .log-number {color: cyan;} 

 <pre id="logger"></pre>