javascript - 我需要使用 JavaScript 在所有标签中插入标签

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 和 tags 里面都有标签，而不会干扰当前的代码。我只能使用 JavaScript（严格来说没有 jQuery），因为它是一个使用代码的第三方应用程序，它需要 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>

看到and标签被注入了span。 我也无法使用 querySelector 有人可以帮我注入这样的跨度标签吗

标签： javascripthtml

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>';
    }
}