Codes are displayed instead of html elements

I have called ajax request in some interval of time. Now, if I pressed the back button after success ajax then, the browser displayed all of my HTML code instead of displaying HTML elements.

<script>
    window.setInterval(function () {
        $.ajax({
            method: 'GET',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: '{{route('devices.index')}}',
            dataType: 'json',
            success: function (data) {
            }
        });
    }, 1000);
</script>

if($request->ajax()){
            foreach ($devices as $device){
                $latestUpdate = Carbon::parse($device->updated_at);
                $diff = Carbon::now()->diffInMinutes($latestUpdate);
                if($diff > 2){
                    Device::where('id',$device->id)->update(['status'=>'3']);
                }
            }
            return response()->json(['msg' => "successfully checked"]);
        }

I had expected to render the HTML elements, but it displayed.

{
"msg": "successfully checked"
}

Same things happened when I send HTML in json.

if($request->ajax()){
            $returnHtml = view('alerts.index', compact('threshold'))
                ->with('alerts', $alerts)->render();
            return response()->json(['html' => $returnHtml, 'data' => $alerts]);
        }

window.setInterval(function () {
    $.ajax({
                method: 'GET',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '{{route('alerts.index')}}',
                dataType: 'json',
                success: function (data) {
                    var formatedhtml = $('<div>').html(data.html).find('table');
                    $('table').html(formatedhtml);
                }
            });
        }, 5000);

In this case it display