javascript - 我需要使用 JavaScript 在所有 <td> 和 <th> 标签中插入 <span> 标签

Question

我有一个 HTML 代码如下

<table>
<thead>
    <tr style="border: 1px solid">
        <th style="border: 1px solid; text-align: center; font-weight: bold;">
            Header 1
        </th>
        <th style="border: 1px solid; text-align: center; font-weight: bold;">
            Header 2
        </th>
        <th style="border: 1px solid; text-align: center; font-weight: bold;">
            Header 3
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td style="border: 1px solid; text-align: center;">
            Row 1 -- Column 1
        </td>
        <td style="border: 1px solid; text-align: center;">
            Row 1 -- Column 2
        </td>
        <td style="border: 1px solid; text-align: center;">
            Row 1 -- Column 3
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 2 -- Column 1
            </span>
        </td>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 2 -- Column 2   
            </span>
        </td>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 2 -- Column 3   
            </span>
        </td>
    </tr>
</tbody>

这将给出这个输出

我想在 all 和 标签内添加标签而不干扰当前代码。 我只能使用 JavaScript(严格不能使用 jQuery)，因为它是消耗代码的第三方应用程序，并且需要 span 标签。

您能帮我注入(inject) span 标签吗，以便输出代码如下所示

<table>
<thead>
    <tr style="border: 1px solid">
        <th style="border: 1px solid; text-align: center; font-weight: bold;">
            <span>
                Header 1
            </span>
        </th>
        <th style="border: 1px solid; text-align: center; font-weight: bold;">
            <span>
                Header 2
            </span>
        </th>
        <th style="border: 1px solid; text-align: center; font-weight: bold;">
            <span>
                Header 3    
            </span>             
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 1 -- Column 1
            </span>
        </td>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 1 -- Column 2
            </span>
        </td>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 1 -- Column 3
            </span>
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 2 -- Column 1
            </span>
        </td>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 2 -- Column 2   
            </span>
        </td>
        <td style="border: 1px solid; text-align: center;">
            <span>
                Row 2 -- Column 3   
            </span>
        </td>
    </tr>
</tbody>

看到 和 标签都注入(inject)了span。 我也无法使用querySelector 有人可以帮我注入(inject)这样的跨度标签

Answer 1

试试这个

const ths = document.getElementsByTagName('th');
for (th of ths) {
    if (!th.querySelector('span')) {
        th.innerHTML = '<span>' + th.innerHTML + '</span>';
    }
}

const tds = document.getElementsByTagName('td');
for (td of tds) {
    if (!td.querySelector('span')) {
        td.innerHTML = '<span>' + td.innerHTML + '</span>';
    }
}