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

Show console.log() in an HTML element in JavaScript

本文关键字：console log 显示 JavaScript HTML 元素      更新时间：2023-10-26

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

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

有人知道怎么做吗？

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

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');

假设您只记录字符串。如果您记录其他内容，例如对象，您可能希望在log方法中添加一个类型检查，如果它是一个对象，请在将其添加到节点之前通过JSON.stringify运行它。

HTLM:

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

JAVASCRIPT:

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

如果您只想写入页面，可以使用document.write（字符串）.

或者，您可以使用段落标记并使用document.getElementById（id）.innerHTML=string。

我会使用这样的东西：

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：）

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

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

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>

相关文章：