Displaying Output in JavaScript
document.write()
document.write() method can be used to dynamically write the output on a web page.
document is an object whose method is write(). Remember methods are followed by parenthesis.
Syntax:
document.write(arg1,arg2,arg3,...);
Within parenthesis we pass arguments which can be text, number, html or any combination of these.
Here is an example showing how to use document.write().
<!DOCTYPE html>
<html>
<head>
<title>Displaying Output</title>
</head>
<body>
<div>This is my html content.</div>
<script>
document.write("hello world", " from JavaScript");
document.write("<p>hello world from JavaScript<p>");</script>
</body>
</html>
document.writeln()
document.writeln() is similar to document.write() except that document.writeln() adds a line break ('\n') in the end. Line breaks cannot be viewed in normal html. The '\n' is only visible in code source or within a <pre></pre> tag.
Syntax:
document.writeln(arg1,arg2,arg3,...);
Within parenthesis we pass arguments which can be text, number, html or any combination of these.
Here is an example showing how to use document.writeln().
<!DOCTYPE html>
<html>
<head>
<title>Displaying Output</title>
</head>
<body>
<pre>
<script>
document.writeln("hello world");
document.writeln("JavaScript is fun");
</script>
</pre>
</body>
</html>
document.getElementById('id_name').innerHTML
document.getElementById('id_name').innerHTML is the most efficient way to write an output on the web page. It can be used to write the content within a specific element (like div or span). It can be used to add new tags dynamically. Content could be simple text or html tags or combination of both.
Syntax:
document.getElementById('id_name').innerHTML = "your content";
Here document is an object, getElementById() is a method in which id name of an element is passed as a parameter and innerHTML is a property which is responsible for adding or modifiying the content within the specified element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Displaying Output</title>
</head>
<body>
<div id="content"></div>
<script>
document.getElementById('content').innerHTML = "<h2>Content added within div using JavaScript.</h2>";
</script>
</body>
</html>
document.write() vs innerHTML
document.write() runs only before loading the whole DOM. Before writing content it clears the content and then overwrites the whole page. Also document.write() does not work in XHTML documents. Moreover using innerHTML gives more control over adding or modifying existing content in the document.
Comments in JavaScript
Comments are written by developers to understand and remember what a piece of code is doing. Comments are ignored by JavaScript interpreter (browsers). It is also used for debugging purpose. Its good practice to write meaningful and precise comments.
Comments can be a single line comment or multi-line comment. Single line comment is follow by // while multi-line comment is written between /*.....*/
Example
<script> //this is a single line comment /* this is a multi-line comment and can be written in more than one line */ </script>