JavaScript Print – To the Console, WebPage, or a Printer [Examples]

You’ve searched for ‘JavaScript Print’ – so you’re probably trying to output data to the console, to the webpage or to a printer. Here’s how to do all three.

Printing to the Console with console.log()

The JavaScript console.log() method prints data to the JavaScript console (visible in your browsers web inspector).

Any type of data can be logged to the console, including strings, numbers, arrays, and objects, and either the contents of, or a text representation of, the value will be displayed.

console.log() is frequently used for debugging – developers use it to view the contents of variables or the result of a function to make sure their code is working in an unobtrusive place.

console.log() Syntax

The syntax for the console.log() method is as follows:

console.log(MESSAGE)

Note that:

• MESSAGE is the text or object your wish to see displayed in the console

Print (Append) Text to the Current Web Page With JavaScript

You may also be looking to print data to the webpage being viewed. This is done using the document.append() method.

document.append() Syntax

The syntax for appending elements to the end of the current page/document is as follows:

document.body.append(CONTENT)

Note that:

• CONTENT should be one or more HTML elements to be appended to the end of the current page
• body is the document element you wish to append to – in this case, the body of the HTML document is specified
  • You could also append to the head or other root HTML element, but if you want the content to be visible, it should be appended to the body element
• If you wish to prepend (add data to the beginning of) the document, document.prepend(CONTENT) can be used in the same way

document.append() Example

I’ll provide a quick example of this one, as you will also need to construct a HTML object containing the data you wish to print/append/prepend:

var paragraphElement = document.createElement("p");
var myText = document.createTextNode("Linux is great!");
paragraphElement.appendChild(myText);
document.body.append(paragraphElement);

The comments should explain what’s going on above. The result of running the above will be to add the text “Linux is great!” to the end of the current web page.

Note that these changes aren’t permanent! Refreshing the page will return it to it’s original state.

Printing to a Printer with window.print()

This one’s quick and easy! Bring up your web browser’s print dialog by executing the following JavaScript code:

window.print();

Hopefully, wherever it was you were hoping to print to using JavaScript, you’ve now found out how!