如何在JavaScript中渲染列表而不使用渲染引擎
JavaScript渲染引擎允许开发者以一种倾向性的方式将原始的JavaScript数据渲染到网站上。这些引擎的示例包括React、Vue、Ember.js等。然而,这些框架并不是渲染JavaScript数据到网站上的必需品。
在本文中,我们将将一组字符串渲染到一个简单的网站上,只使用由DOM和浏览器提供的JavaScript API。
从一个基本的HTML文档开始: 让我们从创建一个简单的HTML文档开始,它会渲染一个空白页。现在,我们将回顾DOM规范定义的两个基本方法,这些方法对于渲染JavaScript数据到DOM中是必需的。
HTML
创建HTML元素:
首先,我们需要学习如何创建新的HTML元素。方法 document.createElement() 创建指定名称的HTML元素。在这个示例中,我们创建了一个 li 元素,即列表项的HTML元素。
附加HTML元素: 然后,我们需要一种方法将新创建的元素附加到DOM(或其他元素)。为此,我们将使用方法 node.appendChild(element) ,它将一个元素(“ element ”)作为另一个元素(“ node ”)的子元素附加上去。
实现: 现在我们可以提出一个算法来将Javascript列表渲染到DOM中。
- 创建一个容器元素
- 循环遍历列表项
- 将每个项目渲染为HTML元素
- 将HTML元素附加到容器元素中
- 将容器元素附加到DOM中
让我们创建两个函数 renderItem 和 renderList 来实现上述算法。
Javascript
我们现在可以使用 renderList 函数,以及我们的数据来渲染列表,传入 document.body 参数。
在HTML上运行它: 我们准备将我们的javascript与初始HTML文档结合起来。运行该文档以查看数据的呈现方式。通过更改Javascript列表来玩耍,看看当您重新加载页面时数据的呈现方式。
HTML
输出: 以下是上面示例的输出。
结论: 本文介绍了如何在不需要炫酷的渲染引擎或完整的框架的情况下将Javascript数据呈现到DOM中。尝试不同的值,并编写不同的 renderItem 来呈现更复杂的数据。