How to show console output on webpage?

Question

When I go to websites like Codecademy or JSBin, I notice that they allow you to see console output. How does that work?

Just to clarify, let's say a user types this in a textbox

console.log('hello');

How can I make the output on the actual web page and just not the browser's console?

Couldst

By adding it to a DOM object? – Daviddavida

How would you do that? – Couldst

Answer 1

As Shahar mentioned, the way to see the output on the actual web page is to add it into a DOM object. For example, if we create a div for the output and add output into it by using jQuery:

HTML:

<div id="output"><div>

Javascript, using jQuery:

// your example output
var string = "hello";

// append to end of output div
function outputToPage() {
    $('#output').append(string + "<br/>");
}

The above example would output string and line-break to the output div, whenever outputToPage() function is called. Please note that you need to have jQuery loaded for the jQuery's .append() method to work.

Brieta

Sorry let me rephrase my question: How can I make it so that when a user types in console.log('hello'); , I will have a JavaScript interpreter read it and print it out to a webpage. What you have is just a string saying hello. – Couldst

@Couldst is console.log(); the only method you want? – Daviddavida