" Technology is anything that wasn’t around when you were born "

The real danger is not that computers will begin to think like men, but that men will begin to think like computers

Display data using JavaScript

JavaScript     Published at 8 months ago    Lumbini Technology

Display data using JavaScript

Display data using JavaScript

We can display data using JavaScript in following ways:

READ: What is onclick Event?

1) Using innerHTML

This method is used to writing into an HTML element.

Use document.getElementById(id) method to access an HTML element.

The id attribute defines the HTML element and innerHTML property defines the HTML content.

<!DOCTYPE html>
<html>
<body>
<p id="hello"></p>
  <script>
    document.getElementById("hello").innerHTML = "Hello JavaScript";
  </script>
</body>
</html>

innerHTML is a common way to display data in HTML.

 

2) Using document.write()

This method is used for writing into HTML output.

document.write() is very usefull for testing purposes.

<!DOCTYPE html>
<html>
<body>
  <script>
    document.write("Hello JavaScript");
  </script>
</body>
</html>

Using document.write() after an HTML document is fully loaded will delete all existing HTML.

<!DOCTYPE html>
<html>
<body>
<h2>I am heading</h2>
<p>I am paragraph.</p>
<button type="button" onclick="document.write("Hello JavaScript")">Try it</button>
</body>
</html>

The document.write() method should only be used for testing purposes.

 

READ: How to Create Sticky Navigation with jQuery ?

 

3) Using window.alert()

This method is used for writing into an alert box.

You can use an alert box to display data.

This type of output is usefull while displaying notice, confirmation etc.

<!DOCTYPE html>
<html>
<body>
  <script>
    window.alert("Hello JavaScript");
  </script>
</body>
</html>

 

4) Using console.log()

This method is used for writing into browser console.

console.log() method is used for debugging purposes.

<!DOCTYPE html>
<html>
<body>
  <script>
    console.log("Hello JavaScript");
  </script>
</body>
</html>

Press F12 to display output.

 

READ: Top 5 Highest Paying Jobs for Computer Science

 

Thank you.....

 

 

To Top