<div id="mountNode1" class="mountNode"></div>
<div id="mountNode2" class="mountNode"></div>
*, *:before, *:after {
box-sizing: border-box;
}
.mountNode > div {
border: 1px solid #ccc;
margin: 1em;
padding: 1em;
}
.mountNode input {
display: block;
margin: 1rem 0;
}
.mountNode pre {
background-color: white;
}
const render = () => {
document.getElementById('mountNode1').innerHTML = `
<div>
Hello HTML
<input />
<pre>${new Date().toLocaleTimeString()}</pre>
</div>
`;
ReactDOM.render(
React.createElement(
'div',
null,
'Hello React',
React.createElement('input', null),
React.createElement('pre', null, new Date().toLocaleTimeString())
),
document.getElementById('mountNode2')
);
};
// setInterval(render, 1000);
View Compiled
This Pen doesn't use any external CSS resources.