JavaScriptで特定の部分だけを非同期処理でリロード(更新)する方法

<div class="wrap">
    <p class="refresh">ここだけ「fetchでリロード」 → <?php echo rand(0, 10); ?></p>
    <p class="no_refresh">ここは「fetchリロードが影響しない」 → <?php echo rand(0, 10); ?></p>
</div>

<button id="fetchReload">fetchでリロード</button>
<button id="browserReload">ブラウザをリロード</button>

<script>
document.addEventListener('DOMContentLoaded', function() {

    //ブラウザをリロード
    const browserReload = document.getElementById('browserReload');
    browserReload.addEventListener('click', function(){
        
        console.log("5秒後にブラウザをリロードする準備");
        setTimeout(function(){
            console.log("リロードします！");
            location.reload();//ブラウザをリロードする
        },5000);//5秒
    });

    //fetchでリロード
    const fetchReload = document.getElementById('fetchReload');
    
    fetchReload.addEventListener('click', function() {
        fetch('refresh.php')
            .then(response => response.text())
            .then(data => {
                // 新しい要素を作成
                let tempDiv = document.createElement('div');
                tempDiv.innerHTML = data;
                let reloadedElement = tempDiv.querySelector('.refresh');
                
                if (reloadedElement) {
                    // 既存の要素を置き換える
                    let existingElement = document.querySelector('.refresh');
                    existingElement.parentNode.replaceChild(reloadedElement, existingElement);
                } else {
                    alert("要素の取得に失敗しました");
                }
            })
            .catch(error => {
                alert("リクエストエラー: " + error);
            });
    });
});
</script>