JavaScript HTML DOM - Changing HTML

❮ Previous Next ❯

JavaScript can modify the content of HTML elements using the HTML DOM.

Changing HTML Content

The simplest way to change the content of an HTML element is by using the innerHTML property.

To modify the content of an HTML element, follow this syntax:

document.getElementById(id).innerHTML = new HTML

This illustration modifies the text within a <p> element.

Example explained:

The HTML code shown above has a <p> element with the attribute id="p1".
We employ HTML DOM to retrieve the element identified as id="p1".
A piece of JavaScript code updates the content inside an element by modifying the innerHTML to display "New text!"

This example modifies what is inside an <h1> element.

Example explained:

The provided HTML document has an <h1>element with the attribute id="id01".
We utilize HTML DOM to retrieve the element with the id="id01".
A piece of JavaScript code updates the content inside an element, specified by the innerHTML attribute, and sets it to "New Heading".

Changing the Value of an Attribute

To modify an HTML attribute's value, follow this syntax.

document.getElementById(id).attribute = new value

This sample demonstrates how to modify the src attribute value of an <img> element.

Example explained:

The provided HTML document has an<img> element with theid="myImage".
We utilize HTML DOM to access the element identified as id="myImage".
A piece of JavaScript code modifies the src attribute of an element, changing it from "smiley.gif" to "landscape.jpg."

Dynamic HTML content

JavaScript has the ability to generate dynamic HTML content.

id="today">Date : Tue Jan 23 2024 20:08:03 GMT+0500 (Pakistan Standard Time)

document.write()

In JavaScript, you can use document.write() to write content directly to the HTML output stream.

Avoid using document.write() once the document has finished loading, as it will overwrite the existing document.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript can Change HTML</h2>
    <p id="p1">Hello World!</p>
    <script>
      document.getElementById("p1").innerHTML = "New text!";
    </script>
    <p>The paragraph above was changed by a script.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1 id="id01">Old Heading</h1>
    <script>
      const element = document.getElementById("id01");
      element.innerHTML = "New Heading";
    </script>
    <p>JavaScript changed "Old Heading" to "New Heading".</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript HTML DOM</h2>
    <img id="image" src="/assets/files/emoji.gif" width="160" height="120">
    <script>
      document.getElementById("image").src = "/assets/files/bridge.jpg";
    </script>
    <p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Date : " + Date();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p>Bla, bla, bla</p>
    <script>
      document.write(Date());
    </script>
    <p>Bla, bla, bla</p>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript HTML DOM - Changing HTML

Changing HTML Content

Changing the Value of an Attribute

Dynamic HTML content

document.write()

Web Development