Javascript uses the **document object model (DOM)** to manipulate the DOM elements. **Rendering** refers to showing the output in the browser.

The DOM establishes parent-child relationships, and adjacent sibling relationships, among the various elements in the HTML file. 

<br>

# Code

An example of an HTML file and its corresponding DOM is shown below:

<!DOCTYPE html>
<html>
<body>
  <h1>My First Web Page</h1>
  <p>My First Paragraph</p>
  <p id="demo"></p>
</body>
</html>

# Implementation

We can use Javascript to access and even change these DOM elements, hence, altering the output on the screen. The `getElementById` method and the `innerHTML` property are particularly useful for accessing and changing these elements. 

<br>

## Example

The following example demonstrates how Javascript alters the contents of the DOM using these methods when an action is performed.

<html>
    <head>
    </head>
    <body>
        <h1>My First Web Page</h1>
        <p>My First Paragraph</p>
        <p id="demo"> This content will change on clicking the button</p>
        <button type="button" onclick='document.getElementById("demo").innerHTML = "New content!"'>Click to render new content</button>

    </body>
</html>

codemirror

## Explanation

In the above code, we have added Javascript code to the `onclick` property of the button. When the user presses the button, the Javascript code finds an element with the `id = demo` in the DOM and alters the contents of this element.

What is JavaScript rendering?

Code

Implementation

Example

Explanation