DOM Document write Methods
DOM Document Object – Part 4
Forward: In this part of the series, we look at DOM Document write Methods.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Two write Methods
There are two write methods (functions). One is write() and the other is writeln().
The write() Method
The write() method writes html code (including ECMAScript) to the document at the position where the method is typed. The syntax is,
document.write(value)
The value is typically an html code fragment, in quotes. If the value has double quotes internally, then the double quotes have to be escaped. The method can actually take more than one value separated by commas.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text
<script type="text/ECMAScript">
document.write("<span style=\"color:blue\">some wordings</span>");
</script>
text text
</p>
</body>
</html>
The value to the write() or writeln() method can also be a variable, pre-declared with a string assigned to it.
The write method can be used to write html code fragment in any position of the document. In order for you to use the write method in a position in a document, you have to place the script having the write method at that position (area) in the document. So, you can place the script with the write method in a paragraph element, figure element, div element, or body element within text, etc. You can also place it in a span element.
So far as the browser is concerned, everything (code and text) typed as the html document is in one long stream (string). So, if you have say, 5 write() methods in a document, the browser will see the write methods in 5 different positions in one long steam (line). The browser displays html elements and executes the write() methods (and scripts) as it sees (meets) them in the stream, during document loading.
Writing Inline and Block-Level Element
If the argument of the write method is an inline element, it would appear in the document as inline element. If the argument is a block-level element, it would appear in the document as a block-level element. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
text text text
<script type="text/ECMAScript">
document.write("<span style=\"color:blue\">Inline-Level Element.</span>");
</script>
text text
<script type="text/ECMAScript">
document.write("<p style=\"background-color:bisque\">Block-Level Element.</p>");
</script>
</body>
</html>
Implementation of Code Fragment
As soon as the html code fragment is written, it is implemented. For example, if the code fragment had an image tag, the image will be displayed (downloaded).
The write() method is executed when the page is loading. You cannot use it after that page has loaded. After the page has loaded, if you want to have an html code fragment displayed, you should use (set) the innerHTML attribute. We have seen this earlier in this DOM volume. If the web page is already loaded and you use the write() method, then a new web page (document) would be displayed and the code fragment implemented in the new web page.
The writeln() Method
The writeln() method is identical to the write() method, with the addition of writing a line break character after each statement. You cannot see the added line break character in the code. Read and try the following code, which may not work with your browser:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text
<script type="text/ECMAScript">
document.writeln("<span style=\"color:blue\">The next line is below me.</span>");
document.writeln("<span style=\"color:blue\">True, I am below you.</span>");
</script>
text text
</p>
</body>
</html>
In order to make the writeln methods work with your browser, you have to place the script inside the html pre element. Read and try the following code, which now works:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text
<pre>
<script type="text/ECMAScript">
document.writeln("<span style=\"color:blue\">The next line is below me.</span>");
document.writeln("<span style=\"color:blue\">True, I am below you.</span>");
</script>
</pre>
text text
</p>
</body>
</html>
This approach is tedious. I suggest you use the following approach:
You can use write() in place of writeln(), by just including the <br> element at the end of the value of the write() method. In this case, you do not need the pre element. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text
<script type="text/ECMAScript">
document.write("<span style=\"color:blue\">The next line is below me.</span><br>");
document.write("<span style=\"color:blue\">True, I am below you.</span><br>");
</script>
text text
</p>
</body>
</html>
Let us take a break here. We continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT