How to add HTML tags using jQuery?

Question

I am a Beginner trying to learn jQuery. I did research about jQuery .wrap(), before(), after() but still don't know how to fix the issue. Check out the below HTML table.

<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>

You can find the <td> tag before class inline-flex and </td> tag after dlink anim . I want to add <tr> before that particular <td> and </tr> after that particular </td> I want to do this for all items. Please help me guys!

Answer 1

Here's a simple solution that does not require jQuery, just plain 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])
}

Note that, although your example does not include a <tr> element under the <tbody>, the browser will add one, so after running this code you'll be left with an empty <tr> (the first one) under the <tbody>.