klovadis/gist:1292642

## gistfile1.html
<html>
	<head>
		<title>...</title>

		<style>
		<!--

		p {
			border-left:4px solid #00FF00;
			display:block;
		}

		p:first-child {
			border-left:4px solid #FF0000;
		}

		p:last-child {
			border-left:4px solid #0000FF;
			display:none;
		}

		-->
		</style>

		<script type="text/javascript">
		<!--

		// dynamic label
		var i = 0;

		// testing function
		function test() {

			// increment label counter
			i++;

			// create new element
			var el = document.createElement('p');

			// assign content
			el.innerHTML = 'paragraph #' + i;

			// append newly created element to DOM
			document.getElementById('container').appendChild(el);

			// update childnodes counter
			document.getElementById('childnodes').innerHTML = document.getElementById('container').childNodes.length;

			// add textarea contents
			document.getElementById('textarea').value = document.getElementById('container').innerHTML;
		}

		-->
		</script>

	</head>

	<body>
		<h1>The Problem</h1>
		<div>
			<button onclick="test()">document.createElement</button>
			childNodes.length: <span id="childnodes">3</span>
		</div>

		<h2>CSS rules</h2>

		<pre>
	p {
		border-left:4px solid #00FF00;
		display:block;
	}

	p:first-child {
		border-left:4px solid #FF0000;
	}

	p:last-child {
		border-left:4px solid #0000FF;
		display:none;
	}
		</pre>

		<h2>innerHTML of Container</h2>
		<textarea id="textarea" cols="32" rows="8" readonly="1"></textarea>

		<h3>Container</h3>
		<div id="container"><p>First</p><p>Second</p><p>Third</p></div>

	</body>
</html>
	<html>
	<head>
	<title>...</title>

	<style>
	<!--

	p {
	border-left:4px solid #00FF00;
	display:block;
	}

	p:first-child {
	border-left:4px solid #FF0000;
	}

	p:last-child {
	border-left:4px solid #0000FF;
	display:none;
	}

	-->
	</style>

	<script type="text/javascript">
	<!--

	// dynamic label
	var i = 0;

	// testing function
	function test() {

	// increment label counter
	i++;

	// create new element
	var el = document.createElement('p');

	// assign content
	el.innerHTML = 'paragraph #' + i;

	// append newly created element to DOM
	document.getElementById('container').appendChild(el);

	// update childnodes counter
	document.getElementById('childnodes').innerHTML = document.getElementById('container').childNodes.length;

	// add textarea contents
	document.getElementById('textarea').value = document.getElementById('container').innerHTML;
	}

	-->
	</script>

	</head>

	<body>
	<h1>The Problem</h1>
	<div>
	<button onclick="test()">document.createElement</button>
	childNodes.length: <span id="childnodes">3</span>
	</div>

	<h2>CSS rules</h2>

	<pre>
	p {
	border-left:4px solid #00FF00;
	display:block;
	}

	p:first-child {
	border-left:4px solid #FF0000;
	}

	p:last-child {
	border-left:4px solid #0000FF;
	display:none;
	}
	</pre>

	<h2>innerHTML of Container</h2>
	<textarea id="textarea" cols="32" rows="8" readonly="1"></textarea>

	<h3>Container</h3>
	<div id="container"><p>First</p><p>Second</p><p>Third</p></div>

	</body>
	</html>