Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
rendering
dom

What is JavaScript rendering?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

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.


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>
svg viewer

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.


Example

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

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.

RELATED TAGS

javascript
rendering
dom
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring