Question

I’m trying to generate a small part of the page using jquery which is generating in the wrong matter even though the code looks solid.

$('#stages').html("");
    var stage = $("#stages");
    var L = $('<h2></h2>').attr('id', 'startachat').append('Who do you wish to connect to?');
    stage.append(L);
    var k = $('<table></table>').attr('id', 'chattypes');
    stage.append(k);
        var G = $('<tr></tr>');         
        k.append(G);
        var m = $('<td></td>');
        var s = $('<img />').attr({'src' : 'data/male_off.png', 'alt' : 'Male', 'class' : 'gender', 'id' : 'genderM'});
        var N = $('<td><td />').attr('id', 'chattypeorcell').append('or');
        var j = $('<td></td>');
        var D = $('<img />').attr({'src' : 'data/female_off.png', 'alt' : 'Female', 'class' : 'gender', 'id' : 'genderF'});
        var x = $('<td><td />').attr('id', 'chattypeorcell').append('or');
        var l = $('<td></td>');
        var z = $('<img />').attr({'src' : 'data/any_off.png', 'alt' : 'Anyone', 'class' : 'gender', 'id' : 'genderA'});

        G.append(m);
        m.append(s);
        G.append(N);
        G.append(j);
        j.append(D);
        G.append(x);
        G.append(l);
        l.append(z);

the html it generates has way to many “or” table data

output

<div id="stages">
  <h2 id="startachat">Who do you wish to connect to?</h2>
  <table id="chattypes">
  <tbody>
  <tr>
    <td><img src="data/male_off.png" alt="Male" class="gender" id="genderM"></td>
    <td id="chattypeorcell">or</td><td id="chattypeorcell">or</td>
    <td><img src="data/female_off.png" alt="Female" class="gender" id="genderF"></td>
    <td id="chattypeorcell">or</td><td id="chattypeorcell">or</td>
    <td><img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"></td>
  </tr>
  </tbody>
  </table>
</div>

I want it to generate something similar to this

    <div id="stages"> 
      <h2 id="startachat">What's your gender?</h2> 
      <table id="chattypes"> 
        <tr> 
            <td id="chattypetextcell"><img src="data/male_off.png" alt="Male" class="gender" id="genderM"/></td> 
            <td id="chattypeorcell">or</td> 
            <td id="chattypevideocell"><img src="data/female_off.png" alt="Female" class="gender" id="genderF"/></td> 
            <td id="chattypeorcell">or</td> 
            <td id="chattypevideocell"><img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"/></td> 
        </tr> 
      </table> 
    </div> 

thank you for reading

Answer 1

The closing td tag is wrong.

It should be :

$('<td></td>').attr('id', 'chattypeorcell').append('or');

instead of:

$('<td><td />').attr('id', 'chattypeorcell').append('or');