Hide and Display Text with DHTML

You can use innerHTML to dynamically hide and display text.

Syntax

Here, {ID of element} is the ID of an HTML element and {content} is the new content to go into the element.

Basic Example

This code includes two functions and two buttons. Each function displays a different message and each button triggers a different function.

In the functions, the getElementById refers to the HTML element by using its ID. We give the HTML element an ID of "myText" using id="myText".

So in the first function for example, you can see that document.getElementById('myText').innerHTML = 'Thanks!'; is setting the innerHTML of the "myText" element to "Thanks!".

Example With User Input

Here's an example of using innerHTML with a text field. Here, we display whatever the user has entered into the input field.