YouTip

# HTML DOM - Modifying HTML Content * * * Through the HTML DOM, JavaScript can access every element in an HTML document. * * * ## Changing HTML Content The simplest way to change an element's content is by using the innerHTML property. The following example changes the HTML content of a

element: ## Example

Hello World!

document.getElementById("p1").innerHTML="New Text!";

The paragraph has its content modified by script.

[Try it »](#) * * * ## Changing HTML Styles Through the HTML DOM, you can access the style object of an HTML object. The following example changes the HTML style of a paragraph: ## Example

Hello world!

Hello world!

document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; [Try it »](#) * * * ## Using Events The HTML DOM allows you to execute code when events occur. When an HTML element "has something happen," the browser generates an event: * Clicking on an element * Loading a page * Changing an input field You can learn more about events in the next chapter. The following two examples change the background color of the element when a button is clicked: ## Example [Try it »](#) In this example, the same code is executed by a function: ## Example function ChangeBackground() { document.body.style.backgroundColor="lavender"; } [Try it »](#) The following example changes the text of a

element when a button is clicked: ## Example

Hello world!

function ChangeText() { document.getElementById("p1").innerHTML="Hello !"; } [Try it »](#)