Many modern libraries and frameworks have sought to make this a less burdensome process by abstracting the DOM reconciliation process away behind a declarative interface. A good example of this is React, which allows you to declare your DOM tree declaratively using its JSX syntax within your JavaScript. JSX looks like regular HTML with the addition of interpolation delimiters ({...}) where regular JavaScript can be written to express data.
Here, we are creating a component that produces a simple <h1> greeting populated with an uppercase name:
function LoudGreeting({ name }) { return <h1>HELLO { name.toUpperCase() } </h1>;}
The LoudGreeting component could be rendered to <body> like so:
ReactDOM.render( <LoudGreeting name="Samantha" ...
