Home > Article > Web Front-end > How to print using javascript

How to print using javascript

藏色散人Original: 2021-07-17 13:57:402264browse

JavaScript does not provide any built-in printing or display functions, but it can "display" data in different ways, namely: 1. "window.alert()"; 2. "document.write( )"; 3. "innerHTML"; 4. "console.log()".

The operating environment of this article: windows7 system, javascript version 1.8.5, DELL G3 computer

How to print javascript?

JavaScript does not provide any built-in printing or display functions.

JavaScript display scheme

JavaScript can "display" data in different ways:

Use window.alert() to write an alert box

Use document.write() to write HTML output

Use innerHTML to write HTML elements

Use console.log() to write to the browser console

Use innerHTML

To access HTML elements, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML attribute defines HTML content:

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Tip: Changing the innerHTML attribute of an HTML element is a common way to display data in HTML.

Use document.write()

For testing purposes, it is more convenient to use document.write():

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Note: Using document.write() after the HTML document is fully loaded will delete all existing HTML:

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>

Tip: The document.write() method is for testing only .

Using window.alert()

You can use an alert box to display data:

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Using console.log()

In a browser, you can use the console.log() method to display data.

Please activate the browser console via F12 and select "Console" in the menu.

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Recommended study: "javascript Advanced Tutorial"

The above is the detailed content of How to print using javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to turn off javascript in firefoxNext article：How to turn off javascript in firefox

See more

How to print using javascript

Related articles