Home > Article > Web Front-end > JavaScript output display content (basic tutorial)

JavaScript output display content (basic tutorial)

亚连Original: 2018-05-19 14:04:261985browse

Friends who have just started to contact js must be exposed to the output of js, so they will definitely use document.write, alert, innerHTML, console.log. Here is a brief introduction. Friends in need can refer to it

JavaScript Output

JavaScript does not have any printing or output functions.

JavaScript displays data

JavaScript can output data in different ways:
Use window.alert() Pop up an alert box.
Use the document.write() method to write the content into the HTML document.
Use innerHTML Write to HTML element.
Use console.log() Write to the browser's console.

Use window.alert()
You can pop up an alert box to display data:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Manipulate HTML elements
such as To access an HTML element from JavaScript, you can use the document.getElementById(id) method.
Please use the "id" attribute to identify HTML elements, and innerHTML to get or insert element content:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

The above JavaScript statement (in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag) can be executed in a web browser:
document.getElementById("demo") is JavaScript code that uses the id attribute to find an HTML element.
innerHTML = "Paragraph has been modified." is the JavaScript code used to modify the HTML content (innerHTML) of the element.
In this tutorial
In most cases, in this tutorial, we will use the method described above to output:
The following example directly puts id="demo" The e388a4556c0f65e1904146cc1a846bee element is written to the HTML document output:
Writing to HTML document
For testing purposes, you can write JavaScript directly in the HTML document:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

Please use document.write() to only write content to the document output.
If document.write is executed after the document has finished loading, the entire HTML page will be overwritten.

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
  	document.write(Date());
}
</script>

</body>
</html>

Write to console console.log()
If your browser supports debugging, you can use the console.log() method to display JavaScript values in the browser.
Use F12 in the browser to enable debugging mode, and click the "Console" menu in the debugging window.

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Example console screenshot:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of the use case of JS callback function

Detailed explanation of the steps to implement the shopping cart function using JS

JS CSS3 realizes the interactive magnification effect between the mouse and the image

The above is the detailed content of JavaScript output display content (basic tutorial). 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：Basic usage of js querySelector() (graphic tutorial)Next article：Basic usage of js querySelector() (graphic tutorial)

See more

JavaScript output display content (basic tutorial)

Related articles