Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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.

  1. Create a container element
  2. Loop through the list items
  3. Render each item into an HTML Element
  4. Attach an HTML Element into the container Element
  5. 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :