ID h4タグ内にテキストが表示されない

Question

私のモーダルヘッダーには、idを持つh4タグがあります。 IDは保存された変数をプルして表示しています。しかし、hタグ内に別のidを張り込もうとすると、スパンアイテムは表示されません。私はすべてのテキストを同じ行に入れたい。

<h4 class="modal-title text-center" id="category"> 
    <span id="subcategory"></span> 
    <span> Test Span</span> 
</h4> 

のJavaScript

$(document).ready(function() { 
$(".open-details-modal").click(function() { 
$('.modal .modal-dialog').css({width: '70%', 
           height: '70%' 
           }); 
$('.modal .modal-dialog').css('overflow-y', 'auto'); 
$("#category").text($(this).attr('data-id-sub-category')); 
$("#subcategory").text($(this).attr('data-id-vendor')); 
    $("#detailsModal").modal("show"); 

}); 
}); 

Answer 1

使用JQuery selectorとfind

var span = $("#category").find("#subcategory"); 
$(span).text($(this).attr('data-id-vendor')); 

Answer 2

コード最初の要素

$("#category").text($(this).attr('data-id-sub-category')); 

ヘッダの内部に2つのスパンをクリアされています。
は終わり

$("#category").append($(this).attr('data-id-sub-category')); 

で

$("#category").prepend($(this).attr('data-id-sub-category')); 

を行い、それは本当にあなたはそれが最初になりたい場合は、例えば、#category内のコンテンツを置きたい場所を正確に依存していることを修正するには

または下部スパン

$("#category span:not(#subcategory)").text($(this).attr('data-id-sub-category'));