Copyright

Showing Text in HTML Using JavaScript: Syntax & Example

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

In this lesson, we'll discuss various methods of using JavaScript to write text in HTML, both in the document itself and in message boxes. Methods discussed include innerHTML, document.write(), alert() and others.

JavaScript, Text and HTML

There are a few methods for displaying text in HTML using JavaScript. We can divide these methods into two broad categories:

  • writing text in the document itself
  • displaying text in a message box or other prompt

Let's have a look at some examples of each category and the specific methods involved.

It is not required, but the examples will be easier to understand if you copy the code into an online code editor or save it as a .html file and open the file in a web browser. That way you can see the effects of the code.

Writing Text in the Document

We'll discuss two ways of using JavaScript to write text into the HTML document itself:

  • the innerHTML property
  • the document.write() method

innerHTML Property

In the following example, the HTML contains only an empty div with the ID writeHere, and a button that says ''Write in the document.''

<!DOCTYPE html>
<html>
<body>
<div id="writeHere">
</div>
<button id="trigger" type="button">Write in the document</button>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
document.getElementById("writeHere").innerHTML = "The text you read here was not written into the HTML, but generated by the JavaScript code.";
}
</script>
</body>
</html>

Once the button is pressed, it triggers the function write() contained inside the <script> element. The function contains only one command:

document.getElementById("writeHere").innerHTML = "The text you read here was not written into the HTML, but generated by the JavaScript code.";

This line identifies the div by its ID, then provides a value for its innerHTML property, which is the text that begins ''The text you read here...''. This text will then appear inside the document, in the <div> element that was previously empty.

And that really demonstrates the simplicity of the innerHTML method. All that is required is to identify the desired HTML element into which to write, and then specify what text should appear in it. The general syntax for using innerHTML is:

element.innerHTML = "text to write into the element"

document.write() Method

This example is almost identical to the one above. The only difference is the command inside the JavaScript function, which now uses the document.write() method to write the same text as before.

<!DOCTYPE html>
<html>
<body>
<div id="writeHere">
</div>
<button id="trigger" type="button">Write in the document</button>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
document.write("The text you read here was not written into the HTML, but generated by the JavaScript code.");
}
</script>
</body>
</html>

When the button is pressed in this example, indeed the same text as before appears within the document, but everything else is overwritten, including the button. This occurs because the method does not target a specific element into which to write, but rather uses the entire document as its ''blank page.'' Consequently, it is advisable to use this method with care, to avoid overwriting important content.

The syntax for this method is even simpler than for the innerHTML property:

document.write("text to write")

Showing Text in Message Boxes

Moving on to the second category of writing text with JavaScript, let's have a look at how to write text in messages boxes. There are three key methods to do this:

  • alert()
  • confirm()
  • prompt()

alert()

Below is our tried and true example, this time using the alert() method to write the same text as before.

<!DOCTYPE html>
<html>
<body>
<div id="writeHere">
</div>
<button id="trigger" type="button">Write in an alert window</button>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
window.alert("The text you read here was not written into the HTML, but generated by the JavaScript code.");
}
</script>
</body>
</html>

Once again, the only difference with this example compared to the first, apart from the button text, is the command in the write() function, which has now become:

window.alert("The text you read here was not written into the HTML, but generated by the JavaScript code.");

Pressing the button creates a new popup window, also called an ''alert'' window that contains the specified text message and a single ''OK'' button. Pressing it closes the window. No value from the window is returned to the program.

The syntax for the alert method is:

window.alert("your message here") or simply alert("your message here")

confirm()

The confirm() method is very similar to alert(). The key difference is that a confirm window will include two buttons, compared to an alert's one. The two buttons are ''OK'' and ''Cancel''. Pressing either button closes the window. However, behind the scenes, pressing ''OK'' returns the value ''true'' and pressing ''Cancel'' returns ''false.'' These values can be used in a more complex program, allowing the user to influence how the program will execute.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support