How to write to an HTML element
In this case, the page contains a <p> tag with an id of myText. This paragraph contains the text Change Me. In addition, there’s an <input> tag that creates a button the user can click. When the user clicks the Click Me button, the application calls the WriteText() function that appears in the <head> of the document within the <script> tag.
At this point, you have access to the entire <p> element with the name myText. You want to change the text within that element. The innerHTML property provides access to the text within the <p> element. You can either read the content or modify it. Using innerHTML =, as shown in the code, modifies the content. It makes the content equal to whatever follows, which is Clicked! in this case.
When you try the example, you initially see a page with some text and a button. Click the button, and the value of the text changes. This technique works with any element that displays text. You could just as easily use it with a <span> or any other tag that can display text.
This technique works only when you interact with elements that contain text within an opening and closing tag, such as <p>. When working with an <input> or other element that uses attributes to hold content, you need to use a different method. In this case, you must access the attribute within the control and make the change there, as shown here:
document.getElementById("btnClickMe").setAttribute( "value", "Clicked!");
The simplest way to perform the task is to create an inline script like the one shown in the following example that adds the required output.
The focal point of this example is the call to the document.write() function. This function lets you write any text you want to the document object. In this case, the example creates a new <p> tag that contains a simple message.
You could easily create this text by adding the <p> tag directly. This particular technique comes in handy. For example, you could use it to check for a condition and then add the appropriate text based on the condition. What you need to see in this example is that writing to the document using a script is indeed possible.
Avoid potential problems with output
Bugs can cause all sorts of problems for users who will, in turn, cause all sorts of problems for you. One of the more interesting errors that you can encounter is writing information to a document object incorrectly. The following illustrates one situation where you see the incorrect result from using the document.write() function.
Notice that the document.write() function is called after the page is completed. When you use the document.write() function in this way, it overwrites everything that appears in the document object. When you click the Click Me button on the page, you see the word Oops! onscreen and nothing else.
In fact, the page won’t even finish loading because the browser doesn’t know what to do with it. To stop the loading process, you must manually click your browser’s Stop Loading button.
At this point, if you use your browser’s ability to view the page source, you’ll see a single word, Oops!. The page no longer contains a <!DOCTYPE> declaration, <html>, <head>, or <body> tags, or any of the other information it used to contain. The document.write() function has overwritten everything.
Now, this isn’t always an incorrect result — you may actually need to overwrite the page with new material, but you need to create an entirely new page when doing so.