Open In App

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

Last Updated : 28 Oct, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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.

  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.



Similar Reads

How to Render Github HTML Code in browser without downloading ?
In this article, we are going to learn How to see a page on GitHub as a normally rendered page to see a preview in a browser, without downloading, Users want to view a page (HTML files) on GitHub and want that page render in their browser instead of downloading the whole repository at their local machine allowing for efficient page viewing and will
3 min read
How re-render a component without using setState() method in ReactJS ?
In React, to re-render a class-based component with an updated state we generally use the setState() method. But instead, we can use other methods to re-render a component without using setState(). Prerequisites: NPM &amp; Node.jsReact JSReactJS propsReactJS forceUpdate() methodApproaches to re-render a component without using setState() method are
3 min read
List all ways to render a list of items in React
In React applications, rendering lists of items is a fundamental task. You will often need to display collections of data, such as product listings, to-do items, or user comments. There is well-established approach that combines JavaScript's array methods and React's component structure to achieve this efficiently. Pre-requisites: NPM and NodeJSRea
5 min read
Different ways to render a list of items in React
This article explains the various approaches for rendering a list of items in React. Render List means displaying various items present in the list. It is a very commonly used operation in applications. React can help in the dynamic rendering of list items. We will discuss the following approaches to render a list of items in React: Table of Conten
4 min read
What happens inside JavaScript Engine ?
JavaScript is a multi-paradigm prototype-based language, which uses JavaScript Engine such as Chrome's V8 engine Firefox SpiderMonkey engine and etc. They convert the high level code into machine-readable code which lets computer to perform some specific tasks. We will understand this using an image. Google chrome's JavaScript V8 engine: Firstly, r
3 min read
Nashorn JavaScript Engine in Java with Examples
Nashorn: Nashorn is a JavaScript engine which is introduced in JDK 8. With the help of Nashorn, we can execute JavaScript code at Java Virtual Machine. Nashorn is introduced in JDK 8 to replace existing JavaScript engine i.e. Rhino. Nashorn is far better than Rhino in term of performance. The uses of invoking dynamic feature, conversion of JavaScri
4 min read
Create a Gif Search Engine Using JavaScript
In this article, we will create a Gif Search Engine using JavaScript. The basic application of Gif search Engine is to search the images from the given user input keywords and the output of the images will be loaded on the same page with different aspect ratios and sizes provided by Giphy. To get the output of the image we will use Giphy EndPoint S
7 min read
V8 JavaScript Engine
The V8 JavaScript engine, developed by Google, is a high-performance open-source engine designed to execute JavaScript code efficiently. Initially created for the Google Chrome web browser, V8 has become a key component in various applications and platforms, showcasing its versatility. V8 employs a Just-In-Time (JIT) compilation technique, translat
1 min read
How to pass Variable to inline JavaScript using EJS Template Engine?
In the EJS templating engine, we can pass variables to inline JS within our HTML templates. We can use the '&lt;%= variable %&gt;' syntax, where we can embed server-side variables directly into the client-side scripts. In this article, we will explore the detailed process to pass a variable to inline javascript using the EJS templating engine in te
2 min read
How to Use Embedded JavaScript (EJS) as a Template Engine in Express JS ?
Embedded JavaScript (EJS) is a simple templating language that helps us to generate HTML markup with plain JavaScript. It's commonly used with Node.js to create dynamic web pages. It also helps to incorporate JavaScript into HTML pages. Approach to use EJS as Template Engine in Express JS:Install EJS: First, you need to install EJS in your Node.js
2 min read