Merge pull request #19035 from Mugen87/dev48

Examples: Refactor webgl_multiple_elements.

examples/webgl_multiple_elements.html

@@ -41,12 +41,12 @@
 				box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.25);
 			}
 
-			.list-item .scene {
+			.list-item > div:nth-child(1) {
 				width: 200px;
 				height: 200px;
 			}
 
-			.list-item .description {
+			.list-item > div:nth-child(2) {
 				color: #888;
 				font-family: sans-serif;
 				font-size: large;
@@ -63,11 +63,6 @@
 			<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple elements - webgl</div>
 		</div>
 
-		<script id="template" type="notjs">
-			<div class="scene"></div>
-			<div class="description">Scene $</div>
-		</script>
-
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
@@ -92,21 +87,25 @@
 					new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 12 )
 				];
 
-				var template = document.getElementById( "template" ).text;
-				var content = document.getElementById( "content" );
+				var content = document.getElementById( 'content' );
 
 				for ( var i = 0; i < 40; i ++ ) {
 
 					var scene = new THREE.Scene();
 
 					// make a list item
-					var element = document.createElement( "div" );
-					element.className = "list-item";
-					element.innerHTML = template.replace( '$', i + 1 );
+					var element = document.createElement( 'div' );
+					element.className = 'list-item';
+
+					var sceneElement = document.createElement( 'div' );
+					element.appendChild( sceneElement );
+
+					var descriptionElement = document.createElement( 'div' );
+					descriptionElement.innerText = 'Scene ' + ( i + 1 );
+					element.appendChild( descriptionElement );
 
-					// Look up the element that represents the area
-					// we want to render the scene
-					scene.userData.element = element.querySelector( ".scene" );
+					// the element that represents the area we want to render the scene
+					scene.userData.element = sceneElement;
 					content.appendChild( element );
 
 					var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10 );