JS 用foreach 将数组遍历将数据用innerhtml渲染到dom节点,写个例子
时间: 2024-03-16 22:46:18 浏览: 70
好的,以下是一个使用 `forEach` 遍历数组,将数据用 `innerHTML` 渲染到 DOM 节点的例子:
HTML:
```html
<ul id="list"></ul>
```
JavaScript:
```js
const data = ['apple', 'banana', 'orange'];
const list = document.querySelector('#list');
data.forEach(item => {
list.innerHTML += `<li>${item}</li>`;
});
```
上述代码将 `data` 数组中的每个元素渲染为一个 `<li>` 标签,并添加到 `id` 为 `list` 的 `<ul>` 标签中。注意,这里使用了 `innerHTML`,因此在每次循环中都对 `innerHTML` 进行了修改,可能会影响性能。如果数据量比较大,建议使用其他方式进行渲染。
阅读全文