I programmed a function, which writes all the stuff in the console (with console.log(string);).
Now I want to "simulate" or show the generated console log in a <p> or a <div>.
Does anyone have an idea how to do this?
I programmed a function, which writes all the stuff in the console (with console.log(string);).
Now I want to "simulate" or show the generated console log in a <p> or a <div>.
Does anyone have an idea how to do this?
Share Improve this question edited Mar 31, 2016 at 19:58 Michał Perłakowski 92.6k30 gold badges163 silver badges186 bronze badges asked Mar 31, 2016 at 19:48 balexbalex 2832 gold badges7 silver badges18 bronze badges6 Answers
Reset to default 10From the clues in your question I take it you work in a browser environment.
console is an object on the window object. Therefor you can easily replace it. The following code will replace the browser's window.console with a custom window.console which has the method log. The log method will take a string and append it to an element with the id myLog
In your HTML:
<p id="myLog"></p>
In your 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');
This is given that you only log strings. If you log other things, such as object, you probably want to add a type check in the log method and if it's an object, run it through JSON.stringify before adding it to the node.
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]);
}
If your trying to just write to the page, you could use document.write(string).
Or, you could use paragraph tags and use document.getElementById(id).innerHTML = string.
I'd use a something like this:
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)
}
This gets the element with id yourContainer, creates a paragraph element then appends the paragraph to the container.
You could also use a pre block instead of the p if you wanted it to look more like the console output :)
var str = 'some text that you send to the console...';
document.getElementById("thediv").innerHTML = str;<div id="thediv"></div>If you would like to create a single line console with the next log message overriding the previous one, and each showing for a specific number of seconds, you can use something like this (that's what I use):
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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Generate random number on console</button>
<div id="console"></div>