blazor web app, javascript call append method question

My project is the blazor web app (.net 9.0)

.razor code :

<div><ul class="nav nav-tabs marginBottom" id="myTab"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">测试页1<span class="closeTabBtn">×</span></a></li></ul></div><div><div class="operationDiv"><button type="submit" class="btn" id="composeButton">Compose</button></div></div>

.css code :

.closeTabBtn{    background-color:gray;    color:black;}

javascript code :

$('#composeButton').click(function (e) {    e.preventDefault();    $('.nav-tabs').append('<li class="nav-item"><a class="nav-link" href="#1">测试页<span class="closeTabBtn">×</span></a></li>');});

Why are tags added through the append method missing CSS styles ?

enter image description here