Question

我正在尝试使用jquery生成页面的一小部分，即使代码看起来很稳定，也会生成错误的内容。

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

它生成的html有很多“或”表数据

输出

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

我希望它能够生成与此类似的东西

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

感谢您阅读

Answer 1

关闭td标记错误。

应该是：

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

而不是：

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

Answer 2

你使用“chattypeorcell”作为元素ID，因此它应该是唯一的，但事实上它被插入了几次，这无法帮助正确生成DOM ... 我也想知道为什么你使用这么多的DOM操作，应该有一个更直接的方式（插入一个字符串作为HTML？）。

HTML生成问题

2 个答案: