How to render a list without render a engine in JavaScript ?

Last Updated : 28 Oct, 2021

Javascript render engines allow developers to render raw Javascript data into a website, in an opinionated way. Examples of these are React, Vue, Ember.js, and many others. However, these frameworks are not required to render Javascript data into a website.

In this article, we will take a list of strings, and render them into a simple website, using nothing else than the Javascript API provided by the DOM and the browser.

Starting with a basic HTML Document: Let’s start by creating a simple HTML document that renders a blank page. Now, we are going to review two fundamental methods defined by the DOM specification, necessary to render Javascript data into the DOM.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Geeks for Geeks</title> 
</head> 
  
<body></body> 
  
</html> 

Creating HTML Elements: First, we have to learn how to create new HTML elements. The method document.createElement() creates the HTML element specified by the passed name. In this case, we are creating a li element, an HTML element representing an item of a list.

const element = document.createElement('li')

Attaching HTML Elements: Then, we need a method to attach the newly created element to the DOM (or to other elements). To this end, we will use the method node.appendChild(element), which attaches an element (“element“) as a child of another element (“node“).

node.appendChild(element);

Implementation: We are now ready to outline an algorithm to render a Javascript list, into the DOM.

Create a container element
Loop through the list items
Render each item into an HTML Element
Attach an HTML Element into the container Element
Attach container element to the DOM

Let’s create two functions, renderItem and renderList that implement the algorithm outlined before.

Javascript

const renderItem = (item) => { 
  
    // Render each item into an HTML Element 
    const listElement = document.createElement('li'); 
    listElement.innerHTML = item; 
    return (listElement); 
} 
  
const renderList = (element, list) => { 
  
    // Create a container element 
    const listElement = document.createElement('ul'); 
  
    // Loop through the list items 
    const completeListElement = list.reduce((listElement, item) => { 
  
        // Attach the HTML Element into the container Element 
        listElement.appendChild(renderItem(item)); 
        return listElement; 
    }, listElement); 
  
    // Attach container element to the DOM 
    element.appendChild(completeListElement) 
}

We now can call the renderList function with document.body and our data to render the list.

renderList(document.body, ['Item 1', 'Item 2', 'Item 3']);

Running it on the HTML: We are ready to combine our javascript with our initial HTML document. Run the document to see how the data renders. Play around by changing the Javascript list to see how the data renders when you reload the page.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Geeks for Geeks</title> 
</head> 
<body> 
    <script> 
        const renderItem = (item) => { 
            const listElement = document.createElement('li'); 
            listElement.innerHTML = item; 
            return (listElement); 
        } 
  
        const renderList = (element, list) => { 
            const listElement = document.createElement('ul'); 
            const completeListElement = list.reduce((listElement, item) => { 
                listElement.appendChild(renderItem(item)); 
                return listElement; 
            }, listElement); 
            element.appendChild(completeListElement) 
        } 
  
        renderList(document.body, ['Item 1', 'Item 2', 'Item 3']); 
    </script> 
</body> 
</html>

Output: Following will be the output of the above example.

Rendered list

Conclusion: This article explains how to render Javascript data into the DOM without the need for a fancy render engine or a full-fledged framework. Play around with different values, and writing different renderItem to render more complex data.

Suggest improvement

Explain Promise.any() with async-await in JavaScript

Next.js on Vercel

Share your thoughts in the comments