Question

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

现在，我想“模拟”或在<p>或<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运行它

Answer 2

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]);
}

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)
}

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

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

Answer 4

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

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

{{1}}

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 个答案: