stevenocchipinti · February 15, 2012 03:40
diff --git a/test.html b/test.html
 <html>

  <head>
    <title>Nested HTML list browser corrections example</title>
  </head>

  <body>

    <!--
      This page shows that the browser will correct nested <li> elements to be
      a flat list of <li> elements in its initial render of the page.
      However, if the same elements are inserted with JS after the initial page
      load, the list will remain nested and will not be corrected.
    -->

    <ul>
      <li id="bla">
        <!-- The HTML on the next line will be corrected by the browser -->
        <!-- hi<li>blabla</li> -->
      </li>
    </ul>
  </body>

  <script>
    // Using JS to insert the same elements the close tags will not be corrected
    document.getElementById('bla').innerHTML = "hi<li>blablabla</li>";
  </script>

 </html>
	<html>

	<head>
	<title>Nested HTML list browser corrections example</title>
	</head>

	<body>

	<!--
	This page shows that the browser will correct nested <li> elements to be
	a flat list of <li> elements in its initial render of the page.
	However, if the same elements are inserted with JS after the initial page
	load, the list will remain nested and will not be corrected.
	-->

	<ul>
	<li id="bla">
	<!-- The HTML on the next line will be corrected by the browser -->
	<!-- hi<li>blabla</li> -->
	</li>
	</ul>
	</body>

	<script>
	// Using JS to insert the same elements the close tags will not be corrected
	document.getElementById('bla').innerHTML = "hi<li>blablabla</li>";
	</script>

	</html>