I have table with few tr elements and i want to add a new td for the first tr element dynamically in my js.

Table before adding td element.

```
<table>
    <tbody>
        <tr>
            <td>A</td>
        <tr>
        <tr>
            <td>D</td>
        <tr>
    <tbody>
<table>

```

I want a table like this

```
<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td> //Newly addded element
        <tr>
        <tr>
            <td>D</td>
        <tr>
    <tbody>
<table>

```

I tried looping through tr elements and adding a new td element using jquery in my js file. Like this :

```
$('table').each((index,tr)=>{
    if(index === 0){
        tr.append("<td>B</td>");
    }
});

```

But no lock. [Object object] is being rendered in DOM in the place where I added new td.
Something like this :
[![enter image description here](https://i.stack.imgur.com/OU7WD.png)](https://i.stack.imgur.com/OU7WD.png)

Please suggest me solution to add new td in tr's dynamically. Thanks in advance.