Rendering div content with Javascript

Instead of using the markup language for the web which defines the structure of a web page, web content can be displayed using simple Javascript. In this article, I will walk you through how div content can be displayed with Javascript.

step 1

Grab the parent div element by its selector (Id) and assign a variable name to it.

const hero = document.getElementById (“hero”);

step 2

Call the innerHTML on the variable name and assign it the HTML content using template literals I.e wrapping the contents in a backtick.

hero.innerHTML = `
 <div class = character-card”>
        <h4 class = name”> wizard <\h4>
      <img class = “avartar src = “images/wizard.png\>
    <p class = “health”>health:60<\p>
   <div class = “dice-container”>
</div>
`

The Javascript code will look like this:

const hero = document.getElementById (“hero”);
hero.innerHTML = `
 <div class = character-card”>
        <h4 class = name”> wizard <\h4>
      <img class = “avartar src = “images/wizard.png\>
    <p class = “health”>health:60<\p>
   <div class = “dice-container”>
</div>
`

Conclusion

These are the simple steps for rendering div content using simple javascript.