js怎么写到tbody里面

通过JavaScript将内容写入<tbody>的方法有很多种，包括直接操作DOM、使用模板引擎等。 其中最常见的方法是通过操作DOM节点，动态生成和插入表格行和单元格。以下是详细描述的一种方法：

首先，通过document.getElementById或document.querySelector获取目标<tbody>元素，然后创建<tr>和<td>节点，最后将这些节点附加到<tbody>中。

一、获取`<tbody>`元素

在操作DOM之前，我们需要先获取目标<tbody>元素。可以通过document.getElementById或document.querySelector来获取：

let tbody = document.getElementById('myTableBody'); // 假设<tbody>的id为'myTableBody'

或者使用document.querySelector：

let tbody = document.querySelector('#myTableBody');

二、创建并插入行和单元格

1. 动态创建行和单元格

在获取到<tbody>元素后，可以动态创建行（<tr>）和单元格（<td>）：

let newRow = document.createElement('tr'); // 创建一个新的<tr>元素
let newCell1 = document.createElement('td'); // 创建第一个<td>元素
newCell1.textContent = '数据1'; // 设置单元格内容
newRow.appendChild(newCell1); // 将<td>添加到<tr>
let newCell2 = document.createElement('td'); // 创建第二个<td>元素
newCell2.textContent = '数据2'; // 设置单元格内容
newRow.appendChild(newCell2); // 将<td>添加到<tr>
tbody.appendChild(newRow); // 将新的<tr>添加到<tbody>

2. 使用模板字符串

如果需要插入大量数据，使用模板字符串会更简洁：

let data = [
    ['数据1', '数据2'],
    ['数据3', '数据4'],
    ['数据5', '数据6']
];
data.forEach(rowData => {
    let newRow = document.createElement('tr');
    rowData.forEach(cellData => {
        let newCell = document.createElement('td');
        newCell.textContent = cellData;
        newRow.appendChild(newCell);
    });
    tbody.appendChild(newRow);
});

三、使用内置方法`insertRow`和`insertCell`

还可以使用表格元素的内置方法insertRow和insertCell来创建和插入行和单元格：

let newRow = tbody.insertRow(); // 创建一个新的<tr>并插入到<tbody>
let newCell1 = newRow.insertCell(); // 创建第一个<td>并插入到<tr>
newCell1.textContent = '数据1';
let newCell2 = newRow.insertCell(); // 创建第二个<td>并插入到<tr>
newCell2.textContent = '数据2';

四、综合示例

以下是一个综合示例，展示如何通过JavaScript将数据动态写入<tbody>：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态插入表格数据</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
            </tr>
        </thead>
        <tbody id="myTableBody">
            <!-- 动态插入的行会出现在这里 -->
        </tbody>
    </table>
    <script>
        let tbody = document.getElementById('myTableBody');
        let data = [
            ['数据1', '数据2'],
            ['数据3', '数据4'],
            ['数据5', '数据6']
        ];
        data.forEach(rowData => {
            let newRow = document.createElement('tr');
            rowData.forEach(cellData => {
                let newCell = document.createElement('td');
                newCell.textContent = cellData;
                newRow.appendChild(newCell);
            });
            tbody.appendChild(newRow);
        });
    </script>
</body>
</html>

通过以上方法，您可以灵活地使用JavaScript将数据动态写入<tbody>中，从而实现更加动态和交互性强的网页内容。