Untitled

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
	</head>
	<body>
		<p id="toast1" role="alert"></p>
		<button onclick="showAlert1();">Show (works) Alert</button>

		<!-- Dynamically adding role="alert" doesn't work -->
		<p id="toast2">This is another alert</p>
		<button onclick="showAlert2();">Show (broken) dynamic alert</button>

		<!-- Creating the toast on the fly and inserting doesn't work -->
		<div id="toast3"></div>
		<button onclick="showAlert3();">Show (broken) created alert</button>

		<!-- Setting text to '', then setting back to original content works -->
		<p id="toast4" role="alert">This will reload its text in the DOM</p>
		<button onclick="showAlert4();">Show (works) reload alert</button>

		<!-- Doesn't work. Not sure why. Probably because region is hidden -->
		<p id="toast5" role="alert" style="visibility: hidden;">This is a timed alert</p>
		<button onclick="showAlert5();">Show (broken) timed alert</button>

		<div id="toast6" role="alert"></div>
		<button onclick="showAlert6();">Show timed alert</button>

		<script>
			var toast1 = document.querySelector('#toast1');
			function showAlert1() {
				toast1.textContent = 'This is an alert';
			}

			var toast2 = document.querySelector('#toast2');
			function showAlert2() {
				toast2.setAttribute('role', 'alert');
			}

			var toast3 = document.querySelector('#toast3');
			function showAlert3() {
				var myAlert = document.createElement('p');
				myAlert.setAttribute('role', 'alert');
				var myAlertText = document.createTextNode('yo yo yo! alert time!');
				myAlert.appendChild(myAlertText);
				toast3.appendChild(myAlert);
			}

			var toast4 = document.querySelector('#toast4');
			function showAlert4() {
				var txt = toast4.textContent;
				toast4.textContent = '';
				toast4.textContent = txt;
			}

			var toast5 = document.querySelector('#toast5');
			function showAlert5() {
				setTimeout(function() {
					var txt = toast5.textContent;
					toast5.style.visibility = 'visible';
					toast5.textContent = '';
					toast5.textContent = txt;
				}, 1000);
			}

			var toast6 = document.querySelector('#toast6');
			function showAlert6() {
				setTimeout(function() {
					var toast = document.createElement('p');
					toast.setAttribute('role', 'alert');
					var txt = document.createTextNode('this is a timed alert');
					toast.appendChild(txt);
					toast6.appendChild(toast);
				}, 1000);
			}
		</script>
	</body>
</html>