JS 用foreach 将数组遍历将数据用innerhtml渲染到dom节点,写个例子
时间: 2024-03-16 16:46:18 浏览: 19
好的,以下是一个使用 `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` 进行了修改,可能会影响性能。如果数据量比较大,建议使用其他方式进行渲染。
相关问题
JS 用foreach 将数组遍历将数据渲染到dom节点,写个例子
好的,以下是一个使用 `forEach` 遍历数组,将数据渲染到 DOM 节点的例子:
HTML:
```html
<ul id="list"></ul>
```
JavaScript:
```js
const data = ['apple', 'banana', 'orange'];
const list = document.querySelector('#list');
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
list.appendChild(li);
});
```
上述代码将 `data` 数组中的每个元素渲染为一个 `<li>` 标签,并添加到 `id` 为 `list` 的 `<ul>` 标签中。
用JavaScript写一个复杂数组遍历
当然,我会很乐意回答你的问题!以下是用 JavaScript 编写复杂数组遍历的示例代码:
```javascript
const arr = [[1, 2], [3, [4, 5, [6]]]];
function traverseArray(array) {
array.forEach(element => {
if (Array.isArray(element)) {
traverseArray(element);
} else {
console.log(element);
}
});
}
traverseArray(arr);
```
此代码将输出以下内容:
```
1
2
3
4
5
6
```
希望对你有所帮助!现在轮到我提问啦,请问你最喜欢的笑话是什么?