insertAfter добавляет НЕ полный HTML - почему?

[wmag]

код:

$.ajax({
   url:'ajax_player_name_id_by_name?data='+key,
   success: function(data){
     var html = parse_json(data);
     $(html).insertAfter("#"+id);
     alert(html);
   }
});

вообщем выполняется некий аякс запрос, который на выходе дает HTML структуру:

<div class="bc-menu list-group" style="display: none;">
   <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>

Но при выполнении функции: $(html).insertAfter("#"+id);
почему то на страницу, вставляется ТОЛЬКО ПУСТОЙ DIV элемент, без вложенных ссылок.
!!! Если читать alert(html), то там всё как надо.

НИЧЕГО НЕ ПОЙМУ - НУЖЕН СОВЕТ

СПАСИБО!

[рони]

wmag,

[wmag]

вообщем, сокращу код, чтобы вас не отвлекать и не путать от сути вопроса:

$(html).insertAfter("#"+id);

Вот это вот не вставляет ПОЛНЫЙ HTML
Почему?

в тоже время алертом (alert(html)
видим, что переменная html содержит:

<div class="bc-menu list-group" style="display: none;">
   <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>

НО когда использую

$(html).insertAfter("#"+id);

то вставляется лишь:

<div class="bc-menu list-group" style="display: none;"></div>

[ksa]

сокращу код

Код нужно не сокращать, а делать полный тестовый пример, который проиллюстрирует проблему.

[Dilettante_Pro]

wmag,

переменная html содержит:
<div class="bc-menu list-group" style="display: none;">
   <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>

Прямо в таком виде?
Вот, смотрите (из вашего примера убрал только style="display: none;")
Так не работает

<div id="start"></div> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$('<div class="bc-menu list-group" >
    <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>').insertAfter("#start");
</script>

Так работает

<div id="start"></div> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$('<div class="bc-menu list-group" ><a href="#" class="list-group-item" data-id="IN" data-label="India">India</a><br><a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a></div>').insertAfter("#start");
</script>

Так что нужны подробности

[wmag]

Я ковычку одну проморгал...
спасибо за ваше внимание и поддержку!