How to append values to a nested div using Jquery

Question

<div id="myDiv1">
<table>
<tr id="row">
</table>
</div>
<div id="myDiv2">
<table>
<tr id="row">
</table>
</div>

Here I need to append different '<td>'s into these two . I have tried this code $('#row').append() but its only putting '<td>'s into the row of myDiv1. Can anyone help me to do this.

Browsers store a fast ID-lookup as a single dictionary entry (of ID vs a single element). This means jQuery and Javascript can only find the first match by ID. Use classes instead. — iCollect.it Ltd, Jan 20 '15 at 11:04

score 2 · Accepted Answer · answered Jan 20 '15 at 11:04

There are multiple erros in your markup:

No closing <tr>-tags
Non-Unique ID's

So the ID-Attribute has to be unique in its scope. See here for further information.

Your mark-up should be looking like this:

<div id="myDiv1">
    <table>
        <tr class="row">
        </tr>
    </table>
</div>
<div id="myDiv2">
    <table>
        <tr class="row">
        </tr>
    </table>
</div>

With the right markup your jQuery just works fine:

$('.row').append('<td>test</td>');

Demo

score 0 · Answer 2 · answered Jan 20 '15 at 11:04

You should change the ID attribute to a class.

But why are you using two tables? maybe you need to clean the html and make it as bellow.

<div id="myDiv1">
    <table>
        <tr class="row">
        </tr>
        <tr class="row">
        </tr>
    </table>
</div>

How to append values to a nested div using Jquery

2 Answers2