jQuery Isn't Updating Span-CodePudding

I have a function that I'm using on my admin page for a quick icon builder for Fontawesome. When updates are run on the fields, I want it to update the icon within two span boxes (one with a dark and one with a light background).

function buildIcons() {
    let primName = document.getElementById("primName").value;
    let primType = document.getElementById("primType").value;
    
    /* Build Final String */
    let iconString = '<i ></i>';
    
    /* Insert and Update */
    $('#boxBlack').text(iconString);
    $('#boxWhite').text(iconString);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div >
        <div >
            <span id="boxWhite">
                <i ></i>
            </span>
        </div>
        <div >
            <span id="boxBlack">
                <i ></i>
            </span>
        </div>
    </div>

When I change the .html to .text, it does update the text of the field correctly... but I can't seem to make it update it so that it is HTML code. Thank you!

Edited to add missing code. Sorry!

CodePudding user response：

Try

$('#boxBlack').html(iconString);
$('#boxWhite').html(iconString);

  function buildIcons() {
    let primName = document.getElementById("primName").value;
    let primType = document.getElementById("primType").value;
    
    /* Build Final String */
    let iconString = 'Test <i >'   primName   '</i>';
    
    /* Insert and Update */
    $('#boxBlack').html(iconString);
    $('#boxWhite').html(iconString);
}
buildIcons();

<head>
<title>Testing</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div >
        <input id="primName" value="rocket"/>
        <input id="primType" value="fa-2x"/>
    </div>
    <div >
        <div >
            <span id="boxWhite">
                <i ></i>
            </span>
        </div>
        <div >
            <span id="boxBlack">
                <i ></i>
            </span>
        </div>
    </div>
</body>