HTML generation problem

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');

Answer 2

you use "chattypeorcell" as element ID, thus it should be unique, but in fact it's inserted several times, which mustn't help the DOM to be correctly generated... i'm also wondering why you use so many DOM manipulations, there should be a more straight forward way (insert a string as HTML?).