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

Question

我编写了一个函数，它将所有内容写入控制台（使用console.log(string); ）。

现在我想在<p>或<div> “模拟”或显示生成的控制台日志。

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

Answer 1

根据您问题中的线索，我认为您在浏览器环境中工作。

console是window对象上的一个对象。 因此，您可以轻松更换它。 以下代码将使用具有方法log的自定义window.console替换浏览器的window.console 。 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');

这是因为您只记录strings 。 如果你记录其他东西，比如对象，你可能想在log方法中添加一个类型检查，如果它是一个对象，在将它添加到节点之前通过JSON.stringify运行它。

Answer 2

HTLM：

<body>
  <ul id ="list"></ul>
</body>

爪哇脚本：

function createMessage(str) {
  var newMessage = document.createElement('li').innerHTML = str;
  var list = document.getElementById("list");
  list.insertBefore(newNode, list.childNodes[0]);
}

Answer 3

我会使用这样的东西：

HTML：

<!DOCTYPE html>
<html>
  <body>
    <div id="yourContainer"></div>
  </body>
</html>

JS：

function logToContainer (message) {
  var container = document.getElementById('yourContainer')
  var messageElement = document.createElement('p')
  messageElement.innerHtml = message
  container.appendChild(messageElement)
}

这将获取 ID 为yourContainer的元素，创建一个段落元素，然后将该段落附加到容器中。

如果您希望它看起来更像控制台输出，您也可以使用pre块而不是p :)

Answer 4

如果您想创建一个单行控制台，其中下一条日志消息覆盖前一条消息，并且每个消息显示特定的秒数，您可以使用这样的东西（这就是我使用的）：

 console.log = (message) => { // wait until the console is clear to show next message function setMessage (_message) { if ($('#console').text()) { // if console is not empty, check again in 0.5s window.setTimeout(() => { setMessage(_message) }, 500) } else { $('#console').text(_message) window.setTimeout(() => { $('#console').text('') }, 3000) // shows the message for 3 seconds } } setMessage(message) } $('#button').click(()=>{ console.log(Math.random().toString()) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="button">Generate random number on console</button> <div id="console"></div>

Answer 5

 var str = 'some text that you send to the console...'; document.getElementById("thediv").innerHTML = str;

 <div id="thediv"></div>

Answer 6

如果您只想写入页面，则可以使用 document.write(string)。

或者，您可以使用段落标签并使用 document.getElementById(id).innerHTML = string。

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

问题描述

6 个解决方案

解决方案1
10 已采纳 2016-03-31 20:22:31

解决方案2
1 2016-03-31 20:26:28

解决方案3
0 2016-03-31 20:17:20

解决方案4
0 2020-08-27 16:36:17

解决方案5
-1 2016-03-31 19:57:38

解决方案6
-1 2016-03-31 19:58:31

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

问题描述

6 个解决方案

解决方案1 10 已采纳 2016-03-31 20:22:31

解决方案2 1 2016-03-31 20:26:28

解决方案3 0 2016-03-31 20:17:20

解决方案4 0 2020-08-27 16:36:17

解决方案5 -1 2016-03-31 19:57:38

解决方案6 -1 2016-03-31 19:58:31

解决方案1
10 已采纳 2016-03-31 20:22:31

解决方案2
1 2016-03-31 20:26:28

解决方案3
0 2016-03-31 20:17:20

解决方案4
0 2020-08-27 16:36:17

解决方案5
-1 2016-03-31 19:57:38

解决方案6
-1 2016-03-31 19:58:31