Problème de génération HTML

Question

J'essaie de générer une petite partie de la page en utilisant jquery qui génère une erreur même si le code semble solide.

$('#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); 

le code html, il génère a ainsi de nombreux "ou" données de la table

de sortie

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

Je veux de générer quelque chose de similaire à ce

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

de remerciement pour lire

Answer 1

La balise td de fermeture est erronée.

Il devrait être:

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

au lieu de:

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

Answer 2

vous utilisez "chattypeorcell" comme ID d'élément, donc il doit être unique, mais en fait, il est inséré à plusieurs reprises, ce qui mustn Ne pas aider le DOM à être correctement généré ... Je me demande aussi pourquoi vous utilisez autant de manipulations DOM, il devrait y avoir un moyen plus simple (insérer une chaîne de caractères en HTML?).