如何正确使用 append 而不会导致 HTML Table 失真答案

【问题标题】：How to use append correctly without causing HTML Table distortion如何正确使用 append 而不会导致 HTML Table 失真
【发布时间】：2015-05-15 08:42:11
【问题描述】：

我有一个表，其中包含从 MySQL 数据库动态加载的链接行。

目前，为了让用户像使用命名锚一样快速访问每个新字母的开头，我有以下脚本，它在动态创建锚和 HTML 表的小样本时工作得很好。您可以从代码中看到脚本不断将其添加到 TD 标记的前面，这导致表格失真。 JavaScript 新手，不知道哪里出错了。我在网上找到了脚本。

总而言之，我希望命名锚显示在所有内容前面的 TD 标记内部。

<script type='text/javascript'>//<![CDATA[ 
$(function(){
char = "";
$('.myTable').each(function(){
    td = $(this);
    $(this).child('td#front').each(function(){
        x = $(this).text()[0];
        if(x!=char){
            char = x;
            q = $('<div class="lettergroup" />').appendTo(td);
            $('<a name="'+char+'" />').appendTo(q);
            $('<h2>'+char+'</h2>').appendTo(q);
        }
        $(this).appendTo(q);
    });
});

$('.lettergroup').each(function(lgi){
    lg = $(this);
    c = $(this).child('td#front');
    l = c.length;
    h = Math.ceil(l/2);
    if(l>1){
        lc = $('<div class="lettercolumn" />').prepend(lg);
        c.each(function(si){
            if(si==h) lc = $('<div class="lettercolumn" />').appendTo(lg);
            $(this).prepend(lc);
                
        });
    $('<br class="clear" />').appendTo(lg);
    }
});




});//]]>  

</script>

<table class="myTable">
  <tr>
    <td>Text</td>
    <a class="letterAnchor" name="A"></a><td class="front">A Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

【问题讨论】：

哦该死的，有很多错误的事情
好吧，我现在真正需要弄清楚的是如何使锚点显示在 TD 标签内而不是之前。谢谢！

标签： javascript jquery html html-table append

【解决方案1】：

我需要的选项是 prependTo。

不带 To 的自身添加不处理 HTML

【讨论】：