如何在HTML中使用HTML中的模板列表？

Question

I have a Template on HTML and a JSON array of objects and Im trying with the Objects from array to create a List using the Template. The list looks different because I think I am not using the template. Does anybody know how can I use it?

 listOfBirds = document.querySelector("#bird-list").innerHTML; theList = document.querySelector(".bird-list"), obj = JSON.parse(listOfBirds); let img = document.createElement("img"), name = document.createElement("name"), latinName = document.createElement("latinName"); name.innerHTML = obj[i].name; name.className = "bird-name"; latinName.innerHTML = obj[i].latinName; latinName.className = "bird-latin-name"; img.src = obj[i].imagePath; img.className = "bird-image"; item.appendChild(img); item.appendChild(name); item.appendChild(latinName); theList.appendChild(item); 

 <script type="text/template" id="bird-list-entry"> <li class="bird-list-entry" bird-id="<%= id %>"> <img src="<%= imagePath %>" class="bird-image" /> <div class="bird-description"> <span class="bird-name"><%= name %></span> <span class="bird-latin-name"><%= latinName %></span> </div> <span class="add-bird-button"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </span> </li> </script> <script type="text/template" id="bird-list"> [{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" },{ "id":5,"name":"Blaumeise", "latinName":"Cyanistes caerruleus", "imagePath":"resources/images/blaumeise.png", "audioPath":"resources/data/audio/blaumeise.ogg" },{ "id":6, "name":"Elster", "latinName":"Pica pica", "imagePath":"resources/images/elster.png", "audioPath":"resources/data/audio/elster.ogg" },{ "id":7, "name":"Grünfink", "latinName":"Chloris chloris", "imagePath":"resources/images/gruenfink.png", "audioPath":"resources/data/audio/gruenfink.ogg" },{ "id":8, "name":"Mehlschwalbe", "latinName":"Delichon urbicum", "imagePath":"resources/images/mehlschwalbe.png", "audioPath":"resources/data/audio/mehlschwalbe.ogg" },{ "id":9, "name":"Mauersegler", "latinName":"Apus apus", "imagePath":"resources/images/mauersegler.png", "audioPath":"resources/data/audio/mauersegler.ogg" },{ "id":10, "name":"Buchfink", "latinName":"Fringilla coelebs", "imagePath":"resources/images/buchfink.png", "audioPath":"resources/data/audio/buchfink.ogg" },{ "id":11, "name":"Ringeltaube", "latinName":"Columba palumbus", "imagePath":"resources/images/ringeltaube.png", "audioPath":"resources/data/audio/ringeltaube.ogg" },{ "id":12, "name":"Feldsperling", "latinName":"Passer montanus", "imagePath":"resources/images/feldsperling.png", "audioPath":"resources/data/audio/feldsperling.ogg" },{ "id":13, "name":"Türkentaube", "latinName":"Streptopelia decaocto", "imagePath":"resources/images/tuerkentaube.png", "audioPath":"resources/data/audio/tuerkentaube.ogg" },{ "id":14, "name":"Rauchschwalbe", "latinName":"Hirundo rustica", "imagePath":"resources/images/rauchschwalbe.png", "audioPath":"resources/data/audio/rauchschwalbe.ogg" },{ "id":15, "name":"Rotkehlchen", "latinName":"Erithacus rubecula", "imagePath":"resources/images/rotkehlchen.png", "audioPath":"resources/data/audio/rotkehlchen.ogg"}] </script> 

Answer 1

I had to make a few changes but this code works.

For the HTML template I changed from <script type="text/template" id="bird-list-entry"> to <template id="bird-list-entry"> which is supported in all newer browsers but not any version of Internet Explorer. I also remove all of the <%= name%> things since they are not needed in the template.

I changed the JavaScript:

• load the template correctly.
• Loop through your array of objects.
• Clone the template for each entry in the array
• Get the sub elements from the cloned template
• Change the attributes and attributes in the cloned template
• Add the cloned and modified template into the list.

 var listOfBirds = document.querySelector("#bird-list").innerHTML; var objList = JSON.parse(listOfBirds); var theList = document.querySelector(".bird-list"); var template = document.querySelector("#bird-list-entry").content; objList.forEach( obj => { let item = template.cloneNode(true); let li = item.querySelector("li"); let img = item.querySelector("img"); let name = item.querySelector(".bird-name"); let latinName = item.querySelector(".bird-latin-name"); li.setAttribute('bird-id', obj.id); name.innerHTML = obj.name; latinName.innerHTML = obj.latinName; img.src = obj.imagePath; theList.appendChild(item); } ); 

 <template id="bird-list-entry"> <li class="bird-list-entry"> <img class="bird-image" /> <div class="bird-description"> <span class="bird-name"></span> <span class="bird-latin-name"></span> </div> <span class="add-bird-button"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </span> </li> </template> <script type="text/template" id="bird-list"> [{"id":1,"name":"Haussperling","latinName":"Passer domesticus","imagePath":"resources/images/haussperling.png","audioPath":"resources/data/audio/haussperling.ogg"},{"id":2,"name":"Kohlmeise","latinName":"Parus major","imagePath":"resources/images/kohlmeise.png","audioPath":"resources/data/audio/kohlmeise.ogg"},{"id":3,"name":"Star","latinName":"Sturnus vulgaris","imagePath":"resources/images/star.png","audioPath":"resources/data/audio/star.ogg"},{"id":4,"name":"Amsel","latinName":"Turdus merula","imagePath":"resources/images/amsel.png","audioPath":"resources/data/audio/amsel.ogg"},{"id":5,"name":"Blaumeise","latinName":"Cyanistes caerruleus","imagePath":"resources/images/blaumeise.png","audioPath":"resources/data/audio/blaumeise.ogg"},{"id":6,"name":"Elster","latinName":"Pica pica","imagePath":"resources/images/elster.png","audioPath":"resources/data/audio/elster.ogg"},{"id":7,"name":"Grünfink","latinName":"Chloris chloris","imagePath":"resources/images/gruenfink.png","audioPath":"resources/data/audio/gruenfink.ogg"},{"id":8,"name":"Mehlschwalbe","latinName":"Delichon urbicum","imagePath":"resources/images/mehlschwalbe.png","audioPath":"resources/data/audio/mehlschwalbe.ogg"},{"id":9,"name":"Mauersegler","latinName":"Apus apus","imagePath":"resources/images/mauersegler.png","audioPath":"resources/data/audio/mauersegler.ogg"},{"id":10,"name":"Buchfink","latinName":"Fringilla coelebs","imagePath":"resources/images/buchfink.png","audioPath":"resources/data/audio/buchfink.ogg"},{"id":11,"name":"Ringeltaube","latinName":"Columba palumbus","imagePath":"resources/images/ringeltaube.png","audioPath":"resources/data/audio/ringeltaube.ogg"},{"id":12,"name":"Feldsperling","latinName":"Passer montanus","imagePath":"resources/images/feldsperling.png","audioPath":"resources/data/audio/feldsperling.ogg"},{"id":13,"name":"Türkentaube","latinName":"Streptopelia decaocto","imagePath":"resources/images/tuerkentaube.png","audioPath":"resources/data/audio/tuerkentaube.ogg"},{"id":14,"name":"Rauchschwalbe","latinName":"Hirundo rustica","imagePath":"resources/images/rauchschwalbe.png","audioPath":"resources/data/audio/rauchschwalbe.ogg"},{"id":15,"name":"Rotkehlchen","latinName":"Erithacus rubecula","imagePath":"resources/images/rotkehlchen.png","audioPath":"resources/data/audio/rotkehlchen.ogg"}] </script> <ul class="bird-list"></ul> 

UPDATE

Since you can not use the <template> tag here is the same code using the <script> tag:

 var listOfBirds = document.querySelector("#bird-list").innerHTML; var objList = JSON.parse(listOfBirds); var theList = document.querySelector(".bird-list"); var template = document.createElement('template'); template.innerHTML = document.querySelector("#bird-list-entry").innerHTML; objList.forEach( obj => { let item = template.content.cloneNode(true); let li = item.querySelector("li"); let img = item.querySelector("img"); let name = item.querySelector(".bird-name"); let latinName = item.querySelector(".bird-latin-name"); li.setAttribute('bird-id', obj.id); name.innerHTML = obj.name; latinName.innerHTML = obj.latinName; img.src = obj.imagePath; theList.appendChild(item); } ); 

 <script type="text/template" id="bird-list-entry"> <li class="bird-list-entry" bird-id="<%= id %>"> <img src="<%= imagePath %>" class="bird-image" /> <div class="bird-description"> <span class="bird-name"><%= name %></span> <span class="bird-latin-name"><%= latinName %></span> </div> <span class="add-bird-button"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </span> </li> </script> <script type="text/template" id="bird-list"> [{"id":1,"name":"Haussperling","latinName":"Passer domesticus","imagePath":"resources/images/haussperling.png","audioPath":"resources/data/audio/haussperling.ogg"},{"id":2,"name":"Kohlmeise","latinName":"Parus major","imagePath":"resources/images/kohlmeise.png","audioPath":"resources/data/audio/kohlmeise.ogg"},{"id":3,"name":"Star","latinName":"Sturnus vulgaris","imagePath":"resources/images/star.png","audioPath":"resources/data/audio/star.ogg"},{"id":4,"name":"Amsel","latinName":"Turdus merula","imagePath":"resources/images/amsel.png","audioPath":"resources/data/audio/amsel.ogg"},{"id":5,"name":"Blaumeise","latinName":"Cyanistes caerruleus","imagePath":"resources/images/blaumeise.png","audioPath":"resources/data/audio/blaumeise.ogg"},{"id":6,"name":"Elster","latinName":"Pica pica","imagePath":"resources/images/elster.png","audioPath":"resources/data/audio/elster.ogg"},{"id":7,"name":"Grünfink","latinName":"Chloris chloris","imagePath":"resources/images/gruenfink.png","audioPath":"resources/data/audio/gruenfink.ogg"},{"id":8,"name":"Mehlschwalbe","latinName":"Delichon urbicum","imagePath":"resources/images/mehlschwalbe.png","audioPath":"resources/data/audio/mehlschwalbe.ogg"},{"id":9,"name":"Mauersegler","latinName":"Apus apus","imagePath":"resources/images/mauersegler.png","audioPath":"resources/data/audio/mauersegler.ogg"},{"id":10,"name":"Buchfink","latinName":"Fringilla coelebs","imagePath":"resources/images/buchfink.png","audioPath":"resources/data/audio/buchfink.ogg"},{"id":11,"name":"Ringeltaube","latinName":"Columba palumbus","imagePath":"resources/images/ringeltaube.png","audioPath":"resources/data/audio/ringeltaube.ogg"},{"id":12,"name":"Feldsperling","latinName":"Passer montanus","imagePath":"resources/images/feldsperling.png","audioPath":"resources/data/audio/feldsperling.ogg"},{"id":13,"name":"Türkentaube","latinName":"Streptopelia decaocto","imagePath":"resources/images/tuerkentaube.png","audioPath":"resources/data/audio/tuerkentaube.ogg"},{"id":14,"name":"Rauchschwalbe","latinName":"Hirundo rustica","imagePath":"resources/images/rauchschwalbe.png","audioPath":"resources/data/audio/rauchschwalbe.ogg"},{"id":15,"name":"Rotkehlchen","latinName":"Erithacus rubecula","imagePath":"resources/images/rotkehlchen.png","audioPath":"resources/data/audio/rotkehlchen.ogg"}] </script> <ul class="bird-list"></ul>