如何在JavaScript中渲染列表而不使用渲染引擎

如何在JavaScript中渲染列表而不使用渲染引擎

JavaScript渲染引擎允许开发者以一种倾向性的方式将原始的JavaScript数据渲染到网站上。这些引擎的示例包括React、Vue、Ember.js等。然而,这些框架并不是渲染JavaScript数据到网站上的必需品。

在本文中,我们将将一组字符串渲染到一个简单的网站上,只使用由DOM和浏览器提供的JavaScript API。

从一个基本的HTML文档开始: 让我们从创建一个简单的HTML文档开始,它会渲染一个空白页。现在,我们将回顾DOM规范定义的两个基本方法,这些方法对于渲染JavaScript数据到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> 
JavaScript

创建HTML元素:

首先,我们需要学习如何创建新的HTML元素。方法 document.createElement() 创建指定名称的HTML元素。在这个示例中,我们创建了一个 li 元素,即列表项的HTML元素。

const element = document.createElement('li')
JavaScript

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

node.appendChild(element);
JavaScript

实现: 现在我们可以提出一个算法来将Javascript列表渲染到DOM中。

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

让我们创建两个函数 renderItemrenderList 来实现上述算法。

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

我们现在可以使用 renderList 函数,以及我们的数据来渲染列表,传入 document.body 参数。

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

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

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>
JavaScript

输出: 以下是上面示例的输出。

如何在JavaScript中渲染列表而不使用渲染引擎

结论: 本文介绍了如何在不需要炫酷的渲染引擎或完整的框架的情况下将Javascript数据呈现到DOM中。尝试不同的值,并编写不同的 renderItem 来呈现更复杂的数据。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册