JS 用foreach 将数组遍历将数据渲染到dom节点，写个例子

好的，以下是一个使用 `forEach` 遍历数组，将数据渲染到 DOM 节点的例子：

HTML：

<ul id="list"></ul>

JavaScript：

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>` 标签中。

相关问题

原生的JS获取表数据渲染到DOM中

在JavaScript中，获取表格数据并将其渲染到DOM中通常涉及到以下几个步骤：

1. **选择元素**：首先，你需要选择HTML中的table元素。可以使用`document.getElementById`、`querySelector`或`document.querySelectorAll`等方法。

const table = document.querySelector('table');

2. **获取表格数据**：对于普通的HTML表格，数据存储在`<tr>`（行）和`<td>`（单元格）元素中。你可以遍历每一行（即每个`<tr>`），然后进一步处理每一项数据（即每个`<td>`）。

let rows = table.rows;
let data = [];
for (let i = 0; i < rows.length; i++) {
    let rowData = [];
    for (let j = 0; j < rows[i].cells.length; j++) {
        rowData.push(rows[i].cells[j].innerText);
    }
    data.push(rowData);
}

3. **创建模板或节点**：将数据结构转化为DOM元素，这通常是通过函数式编程的方式，如`createElement`和`appendChild`。

function createRow(dataRow) {
    const row = document.createElement('tr');
    for (let cell of dataRow) {
        const cellNode = document.createElement('td');
        cellNode.innerText = cell;
        row.appendChild(cellNode);
    }
    return row;
}

// 使用生成的行
tableBody = table.getElementsByTagName('tbody')[0]; // 如果有tbody标签，选择它
data.forEach(row => tableBody.appendChild(createRow(row)));

4. **插入到DOM**：将生成的行添加到原始表格的适当位置（通常是tbody部分）。

以上就是一个基本的流程示例，实际操作可能会因表格的结构、动态加载数据或其他复杂情况而有所不同。完成上述步骤后，你应该能看到表格的数据已经被成功渲染到了页面上。