---
title: DOM HTML
description: "> The HTML DOM allows JavaScript to change the content of HTML elements. --- ## Changing the HTML Output Stream JavaScript can create dynamic HTML content: **Date: Wed May 19 2021 15:32:50 GMT+0800 (Ulaanbaatar Standard Time)** In JavaScript, `document.write()` can be used to…"
url: "https://apprentice.mn/docs/dom-html/"
updated: "2021-05-19"
category: Javascript
---

# DOM HTML

> The HTML DOM allows JavaScript to change the content of HTML elements.

---

## Changing the HTML Output Stream

JavaScript can create dynamic HTML content:

**Date: Wed May 19 2021 15:32:50 GMT+0800 (Ulaanbaatar Standard Time)**

In JavaScript, `document.write()` can be used to write directly to the HTML output stream:

### Example

      `<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>`

> Never use `document.write()` after the document is loaded. It will overwrite the document.

---

## Changing HTML Content

The easiest way to modify the content of an HTML element is by using the `innerHTML` property.

To change the content of an HTML element, use this syntax:

  document.getElementById(*id*).innerHTML =* new HTML*

This example changes the content of a `<p>` element:

### Example

      `<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>`

Example explained:

- The HTML document above contains a `<p>` element with `id="p1"`
- We use the HTML DOM to get the element with `id="p1"`
- A JavaScript changes the content (`innerHTML`) of that element to “New text!”

This example changes the content of an `<h1>` element:

### Example

      `<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>`

Example explained:

- The HTML document above contains an `<h1>` element with `id="id01"`
- We use the HTML DOM to get the element with `id="id01"`
- A JavaScript changes the content (`innerHTML`) of that element to “New Heading”

---

                                

---

## Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax:

  document.getElementById(*id*).*attribute = new value*

This example changes the value of the src attribute of an `<img>` element:

### Example

      `<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>`

Example explained:

- The HTML document above contains an `<img>` element with `id="myImage"`
- We use the HTML DOM to get the element with `id="myImage"`
- A JavaScript changes the `src` attribute of that element from “smiley.gif” to “landscape.jpg”

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-html%2F&linkname=DOM%20HTML](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-html%2F&linkname=DOM%20HTML)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-html%2F&linkname=DOM%20HTML](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-html%2F&linkname=DOM%20HTML)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-html%2F&linkname=DOM%20HTML](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-html%2F&linkname=DOM%20HTML)[https://www.addtoany.com/share](https://www.addtoany.com/share)