Динамический контент выбрасывается из таблицы

Question

У меня проблема при генерации списка результатов поиска в реальном времени - я поместил их в специальный div с идентификатором «result», как показано ниже ( не обращайте внимания на SightsList, это AJAX - предварительно извлеченный массив;также алгоритм не является оптимальным, я знаю это, но это не предмет ).Итак, основная проблема в том, почему строки таблицы выбрасываются из таблицы?HTML в браузере выглядит как <table></table><tr><td> (а затем все сгенерированные строки).Та же проблема касается <ul> и <li>.

$("input#namebox").keyup(function() {  

    var value = $(this).val();
    value = value.toLowerCase();
    value = $.trim(value);

    if (value.length > 3) {

        $("#result").html("<table>");

        for (var i=0; i<SightsList.length; i++) {
            if (undefined != SightsList[i]) {
                if (void 0 != SightsList[i]) {

                    SightsList[i] = SightsList[i].toLowerCase();

                    if (SightsList[i].indexOf(value)+1) {

                        $("#result").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ '  –  ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');

                        $("#message").show();
                    }
                }
            }

            if (i==(SightsList.length-1)) {
                $("#result").append("</table>");
            }
        }


        //tried to close table here with the same (no) result                                   $('.singleresult').highlight(value);

        $("#result").show();
    }

    if (value.length < 4) { 
        $("#result").hide();
        $("#result").html("");  
    }
}

Answer 1

.html и .append - это не просто строковые функции, они работают в DOM.

$("#result").html("<table>") помещает таблицу в элемент #result. Поскольку не указано ни одной строки, это пустая таблица (<table></table>). Затем ваш .append пытается поставить строку после этой таблицы.

Таким образом, вместо добавления к содержимому #result, вы хотите добавить к создаваемой таблице:

$("#result > table").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ ' ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');

и удалите вашу попытку добавить тег конечной таблицы.