Esconder div se estiver sem conexão com a internet

Front-end JavaScript
#1

Olá, sou novo em programação e gostaria da ajuda de vocês! Estou com um script que identifica se há ou não conexão com a internet, queria adaptar ele, ou se tiverem uma alternativa melhor, fazer com que ele ocultasse uma div assim que identificado a falta de conexão…

Segue o meu código:

<div id="div"></div>

<script type="text/javascript">
	function detectnet() {
		if(navigator.onLine) {
			document.getElementById("div").innerHTML = 'online';
		} else {
			document.getElementById("div").innerHTML = 'offline';
		}
	}
	
	setInterval(function(){ detectnet(); }, 1000);
</script>
#2 
<div id="div"></div>

<script type="text/javascript">
    function detectnet() {
        if (navigator.onLine) {
            document.getElementById("div").innerHTML = 'online';
            setTimeout(toggleDisplay, 500);
        } else {
            document.getElementById("div").innerHTML = 'offline';
            setTimeout(toggleDisplay, 500);
        }
    }

    function toggleDisplay() {
        document.getElementById("div").style.display = document.getElementById("div").style.display === "none" ? "block" : "none";
    }

    setInterval(detectnet, 1000);
</script>
#3

Há muitas chamadas ao DOM, dependendo do que vai fazer perde performance, segue uma forma “mais compacta”:

function detectnet() {
    var status = navigator.onLine ? 'online' : 'offline';
    var display = navigator.onLine ? 'block' : 'none';
    var div = document.getElementById('div');
    div.innerHTML = status;
    div.style.display = display;
}
setInterval(detectnet, 1000);

Cada vez que se chama:

document.getElementById("div")

Está reiniciando a busca no DOM (pesquise mais a respeito) fazendo chamadas desnecessárias onde a forma que mostrei você já tem o elemento na memória para manipular como desejar…