我想将 console.log 输出写入 div 层。
例如：
document.write(console.log(5+1)); //Incorrect, random example
有人可以给我解决我的问题吗？
谢谢你。
编辑：
我的意思是，例如：
console.log("hi");
它在屏幕上显示输出“hi”。
注意：示例：http : //labs.codecademy.com/# : workspace
Javascript：console.log 到 html
IT技术
javascript
2021-03-07 04:29:24
6个回答
您可以覆盖的默认实现 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 />';
}
}
})();
演示：小提琴
@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());
聚会有点晚了，但我更进一步地接受了@Hristiyan Dodov 的回答。
现在重新连接所有控制台方法，并且在文本溢出的情况下，包括可选的自动滚动到底部。颜色现在基于日志记录方法而不是参数。
rewireLoggingToElement(
() => document.getElementById("log"),
() => document.getElementById("log-container"), true);
function rewireLoggingToElement(eleLocator, eleOverflowLocator, autoScroll) {
fixLoggingFunc('log');
fixLoggingFunc('debug');
fixLoggingFunc('warn');
fixLoggingFunc('error');
fixLoggingFunc('info');
function fixLoggingFunc(name) {
console['old' + name] = console[name];
console[name] = function(...arguments) {
const output = produceOutput(name, arguments);
const eleLog = eleLocator();
if (autoScroll) {
const eleContainerLog = eleOverflowLocator();
const isScrolledToBottom = eleContainerLog.scrollHeight - eleContainerLog.clientHeight <= eleContainerLog.scrollTop + 1;
eleLog.innerHTML += output + "<br>";
if (isScrolledToBottom) {
eleContainerLog.scrollTop = eleContainerLog.scrollHeight - eleContainerLog.clientHeight;
}
} else {
eleLog.innerHTML += output + "<br>";
}
console['old' + name].apply(undefined, arguments);
};
}
function produceOutput(name, args) {
return args.reduce((output, arg) => {
return output +
"<span class=\"log-" + (typeof arg) + " log-" + name + "\">" +
(typeof arg === "object" && (JSON || {}).stringify ? JSON.stringify(arg) : arg) +
"</span> ";
}, '');
}
}
setInterval(() => {
const method = (['log', 'debug', 'warn', 'error', 'info'][Math.floor(Math.random() * 5)]);
console[method](method, 'logging something...');
}, 200);#log-container { overflow: auto; height: 150px; }
.log-warn { color: orange }
.log-error { color: red }
.log-info { color: skyblue }
.log-log { color: silver }
.log-warn, .log-error { font-weight: bold; }<div id="log-container">
<pre id="log"></pre>
</div>我来的有点晚了Arun P Johny's answer的更高级版本。他的解决方案不处理多个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> ";
}
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>我把它一个微小的一点，并增加了一个类来每个日志，所以你可以颜色它。它输出在 Chrome 控制台中看到的所有参数。您还可以通过 访问旧日志console.old()。
这是上面脚本的缩小版本，用于内联粘贴，仅供您使用：
<script>
!function(o){console.old=console.log,console.log=function(){var n,e,t="";for(e=0;e<arguments.length;e++)t+='<span class="log-'+typeof(n=arguments[e])+'">',"object"==typeof n&&"object"==typeof JSON&&"function"==typeof JSON.stringify?t+=JSON.stringify(n):t+=n,t+="</span> ";o.innerHTML+=t+"<br>",console.old.apply(void 0,arguments)}}
(document.body);
</script>
将document.body括号中的内容替换为您希望登录的任何元素。
创建输出
<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);