如何使用 jQuery 添加 HTML 标签？

Question

我是一个试图学习 jQuery 的初学者。 我对 jQuery .wrap()、before()、after() 进行了研究，但仍然不知道如何解决这个问题。 查看下面的 HTML 表格。

<table id="tlist" class="firstleft">
<tbody>
    <td>
        <div class="inline-flex">
            <span class="inline">1.</span>
            <h3 class="nostyle"><span itemprop="name"> Idhuvum Kadandhu Pogum </span></h3>
        </div>
        <br />
        <b>Singers: </b><span itemprop="byArtist">Sid Sriram</span>
    </td>
    <td>
        <a class="dlink anim" href="https://dslink.xyz/Masstamilan.In/Netrikann/Idhuvum-Kadandhu-Pogum-MassTamilan.In.mp3" rel="noopener noreferrer">Download</a>
    </td>

    <td>
        <div class="inline-flex">
            <span class="inline">2.</span>
            <h3 class="nostyle"><span itemprop="name"> Idhuvum Kadandhu Pogum (Reprise) </span></h3>
        </div>
        <br />
        <b>Singers: </b><span itemprop="byArtist">Girishh,Bombay Jayashri,Amrit Ramnath</span>
    </td>
    <td>
        <a class="dlink anim" href="https://dslink.xyz/Masstamilan.In/Netrikann/Idhuvum-Kadandhu-Pogum-%28Reprise%29-masstamilan.in.mp3" rel="noopener noreferrer">Download</a>
    </td>

    <td>
        <div class="inline-flex">
            <span class="inline">3.</span>
            <h3 class="nostyle"><span itemprop="name"> Netrikann Title Track </span></h3>
        </div>
        <br />
        <b>Singers: </b><span itemprop="byArtist">Girishh,Poorvi Koutish</span>
    </td>
    <td>
        <a class="dlink anim" href="https://dslink.xyz/Masstamilan.In/Netrikann/Netrikann-Title-Track-masstamilan.in.mp3" rel="noopener noreferrer">Download</a>
    </td>

    <td>
        <div class="inline-flex">
            <span class="inline">4.</span>
            <h3 class="nostyle"><span itemprop="name"> Po Nilladhe </span></h3>
        </div>
        <br />
        <b>Singers: </b><span itemprop="byArtist">Girishh,Sharanya Gopinath,Syan Saheer</span>
    </td>
    <td>
        <a class="dlink anim" href="https://dslink.xyz/Masstamilan.In/Netrikann/Po-Nilladhe-masstamilan.in.mp3" rel="noopener noreferrer">Download</a>
    </td>
</tbody>

您可以在 class inline-flex之前找到<td>标签，在dlink anim之后找到</td>标签。 我想补充<tr>在此之前，尤其是<td>和</tr>后特别</td>我要为所有项目做到这一点。 请帮帮我伙计们！

Answer 1

这是一个不需要 jQuery 的简单解决方案，只需要普通的 JavaScript：

tbd = document.querySelector('tbody')
tds = document.querySelectorAll('tbody td')

for (let i=0; i < tds.length/2; i++) {
    tr = document.createElement('tr')
    tbd.appendChild(tr)
    tr.appendChild(tds[2*i])
    tr.appendChild(tds[2*i+1])
}

请注意，尽管您的示例在 <tbody> 下不包含 <tr> 元素，但浏览器会添加一个元素，因此在运行此代码后，您将在 < 下留下一个空的 <tr>（第一个）身体>。