span的文本不会在html中更新

Question

我有以下HTML代码

<span id="remain_1">423</span>

我使用此代码更新文本

$("#remain_1").text("gfdgfd");

在jquery中它的值正在更新，$("#remain_1").text()它返回给我gfdgfd ，但在HTML代码中，它没有更新。有什么问题？

这是我想要编辑的项目。

<div class="col s6 m3 l2">

                <div class="card">
                    <div class="card-image">
                        <a href="/product/3/محصول-شماره-یک">
                            <img src="/files/test.jpg" alt="محصول شماره یک">
                        </a>
                        <span id="remain_1">423</span>
                        <a class="btn-floating halfway-fab waves-effect waves-light red" onclick="addToCart(3)"><i class="material-icons">add_shopping_cart</i></a>
                    </div><br>
                    <div class="card-content">
                        <a href="/product/3/محصول-شماره-یک">
                            <small class="small">محصول شماره یک</small>
                        </a>    
                        <br>
                        <span class="green-text">423 تومان</span>
                    </div>
                </div>

                        </div>

和jquery代码

function addToCart(product_id){
        $("#remain_1").text("gfdgfd");

        localStorage.setItem("products", localStorage.getItem("products") + "," + product_id);
        $("#cart_items_count").text(parseInt($("#cart_items_count").text()) + 1);

        $("#remain_" + product_id).trigger("change");

        Materialize.toast($("#remain_" + product_id).text(), 2000);
    }