Jan's Web Scripting
Intro
CSS
Javascript
DOM
How To:
Samples
 
Change Image
Change Style
Reveal and Hide
Write
 
Home
Lessons
Archives
About
 
Jegsworks: Free Online Computer Lessons Logo:Jegsworks Jan's Illustrated Computer Literacy 101


Home > Resources & Examples > Jan's Web Scripting Demo > Write

Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page


Jan's Web Scripting Demo:
Write

You can change the HTML code on the page or the contents of a specific element by using a script that changes the innerHTMLor innerText property. The difference is that innerHTML can include HTML tags for formatting and layout in addition to the actual text.

Change innerText

This is my floating DIV. Can I change this text?
 

The JavaScript statement that changes the text:

document.getElementById('mydiv').innerText="This is new text for mydiv."

Change innerHTML

This is my second floating DIV. Can I change the HTML?
 

This Javascript statement changes the HTML. It includes tags and STYLE attributes:

document.getElementById('mydiv2').innerHTML="<p style='background-color:lightblue;'>This is new <strong>text</strong> with <span style='color:green; font-weight:bold;font-size:large;'>new formatting</span>.</p>"

What changed? The replacement HTML added a paragraph tag with a background-color. The word 'text' was made bold. The phrase 'new formatting' got a new color and size, plus was made bold.


document.write()

This is a method of adding text or HTML to a page with a script while the browser is putting the page together for display. This method lets the web server add text that customizes the page by using your name or account number.

Example:

<!DOCTYPE html>
<html>
<body>

<script>

var txt = "Hello!";

document.write("<p>This is an <strong>example</strong> of using the document.write method for creating content for a web page.</p><p>You can include HTML code as well as text.</p><p>This method works best in a script that runs when the page is loading.</p>

</script>

</body>
</html>

The code above creates the page in the frame below:

Once the loading process has finished, the document is considered to be 'closed'. Using the document.write() method after that will overwrite the entire page. That is not usually what you want to do.

So using innerHTML or innerText properties is almost always better than the document.write() method for making changes in response to a user's action, like onClick or onMouseOver.


User Input

The real power of these methods is not replacing some text with predetermined text but to be able to include a user's input. This is often done by using an input form. The problem to deal with is that the input is lost when a new page loads. The web server can remember, but that means using server-based programming instead of client-side Javascript. This gets complicated fast!

For an example of how you can use input from a form to create a new 'document', see the Santa LetterIcon: In Site example. This letter shows a template at the bottom that would usually be hidden. After the form is completed, the form is hidden and the template fills in the parts that use the form entries. Slick!