如何在不渲染 JavaScript 引擎的情况下渲染列表？

Javascript 渲染引擎允许开发人员以一种自以为是的方式将原始 Javascript 数据渲染到网站中。这些例子有 React、Vue、Ember.js 等等。但是，这些框架不需要将 Javascript 数据呈现到网站中。

在本文中，我们将获取一个字符串列表，并将它们渲染成一个简单的网站，只使用 DOM 和浏览器提供的 Javascript API。

从一个基本的 HTML 文档开始：让我们从创建一个呈现空白页面的简单 HTML 文档开始。现在，我们将回顾 DOM 规范定义的两个基本方法，它们是将 Javascript 数据渲染到 DOM 中所必需的。

HTML

创建 HTML 元素：首先，我们必须学习如何创建新的 HTML 元素。方法 文档.createElement() 创建由传递的名称指定的 HTML 元素。在这种情况下，我们正在创建一个li element，表示列表项的 HTML 元素。

const element = document.createElement('li')

附加 HTML 元素：然后，我们需要一个方法将新创建的元素附加到 DOM（或其他元素）。为此，我们将使用方法node.appendChild(element) ，它将一个元素（“ element ”）附加为另一个元素（“ node ”）的子元素。

node.appendChild(element);

实现：我们现在准备概述一种算法来将 Javascript 列表渲染到 DOM 中。

1. 创建容器元素
2. 循环遍历列表项
3. 将每个项目呈现为 HTML 元素
4. 将 HTML 元素附加到容器元素中
5. 将容器元素附加到 DOM

让我们创建两个函数， renderItem和renderList来实现前面概述的算法。

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)
}

我们现在可以使用document.body和我们的数据调用renderList函数来渲染列表。

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

在 HTML 上运行它：我们准备好将我们的 javascript 与我们的初始 HTML 文档结合起来。运行文档以查看数据的呈现方式。通过更改 Javascript 列表来查看重新加载页面时数据的呈现方式。

HTML

    
    
    
    Geeks for Geeks


    
        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']);
    

输出：以下将是上述示例的输出。

渲染列表

结论：本文解释了如何在不需要花哨的渲染引擎或成熟的框架的情况下将 Javascript 数据渲染到 DOM 中。使用不同的值，并编写不同的 renderItem来渲染更复杂的数据。