Changing the Contents of a div

The contents of a div can be changed by setting the div's innerHTML property. As the name of the property implies, innerHTML is the HTML inside a div. For example, Figure 13-11 shows a web page with a brainteaser—find all the Fs in the text.

In the HTML, the block of text is contained in a div. Clicking on the link makes the Fs bigger by replacing the contents of the div with a string of HTML that displays the same text, but with larger Fs. Figure 13-12 shows the code.

The JavaScript in Figure 13-12 should look very familiar to you by now. Line ❸ creates a div called myDiv, ❶ sets the variable theDiv to point to myDiv, and ❷ changes the innerHTML of that div to a new string containing a block of HTML. Changing the ...

Get The Book of JavaScript, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.