Znikanie treści podczas wykonywania skryptu w JS

W ramach przypomnienia sobie podstaw z JavaScript napisałem taki krótki skrypcik testowy, którego zadaniem jest "dynamiczne odliczanie". Sama funkcja odliczająca działa ale powoduje ona skasowanie treści, która była wypisana wcześniej.

<script type="text/javascript" charset="UTF-8">
		
		var x = y = z = 5; // wszystkie zmienna mają wartość 5
		var a =10;
		
		document.write("zmienna 'a' ma wartość: " + a +"<br>");
		document.write("x+y+z =  " + (x+y+z)+ "<br>");
		
		var iterator = 0;
		
		function DelayTest()
		{
			document.write("odliczono:" + iterator + '<br>');
			iterator ++;
			
			if(iterator > 9)
				{return true;}
				
			setTimeout("DelayTest()", 1000);
		}
		
		DelayTest();
		
	</script>

Konkretnie, funkcja powoduje zniwelowanie wcześniej wykonanych:

document.write("zmienna 'a' ma wartość: " + a +"
");
document.write("x+y+z = " + (x+y+z)+ "
");

Ktoś wie dlaczego tak się dzieje i jak temu zaradzić ?

Przed wywołaniem funkcji interpreter JS automatycznie zamyka strumień (strona się załadowała) i document.write() wywołuje automatycznie document.open() - co automatycznie czyści dokument.

Dodaj tag do części wypisywanej w funkcji, a całość wykonaj dopiero po załadowaniu strony.
Nie zapisujesz wtedy document.write(), tylko:

document.getElementById('Delay').write();

Hmmm... Chyba Cię źle zrozumiałem. Napisałem coś takiego:

<script type="text/javascript" charset="UTF-8">
		
		var x = y = z = 5; // wszystkie zmienna mają wartość 5
		var a =10;
		
		document.write("zmienna 'a' ma wartość: " + a +"<br>");
		document.write("x+y+z =  " + (x+y+z)+ "<br>");
		
		var iterator = 0;
		
		function DelayTest()
		{
			document.getElementById("Delay").write("odliczono:" + iterator + '<br>');
			iterator ++;
			
			if(iterator > 9)
				{return true;}
				
			setTimeout("DelayTest()", 1000);
		}
		
		DelayTest();
		
	</script>
	
	<div id="Delay">
	</div>
	
	po funkcji

Efekt jest taki jakby funkcja w ogóle się nie wykonała. Mógłbyś trochę rozjaśnić rozwiązanie ?