Sublime Text
<!DOCTYPE html> <html> <body> <h1>Thẻ Template trong HTML</h1> <p>Click vào nút nhấn thì sẽ hiện các nội chưa chưa được hiện</p> <button onclick="showContent()">bear</button> <button onclick="showContent1()">banana</button> <template> <h2>Bear</h2> <img src="https://st.quantrimang.com/photos/image/2020/07/24/Hinh-nen-We-Bare-Bear-1.png" width="300" height="200"> </template> <template> <h2>Banana</h2> <img src="https://i.pinimg.com/originals/14/f1/01/14f101a28f7bf7f860f3b3a8fd3fae4c.png" width="300" height="200"> </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } function showContent1() { var temp = document.getElementsByTagName("template")[1]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script> </body> </html>
<!DOCTYPE html> <html> <body> <h1>Thẻ Template trong HTML</h1> <p>Click vào nút nhấn thì sẽ hiện các nội chưa chưa được hiện</p> <button onclick="showContent()">bear</button> <button onclick="showContent1()">banana</button> <template> <h2>Bear</h2> <img src="https://st.quantrimang.com/photos/image/2020/07/24/Hinh-nen-We-Bare-Bear-1.png" width="300" height="200"> </template> <template> <h2>Banana</h2> <img src="https://i.pinimg.com/originals/14/f1/01/14f101a28f7bf7f860f3b3a8fd3fae4c.png" width="300" height="200"> </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } function showContent1() { var temp = document.getElementsByTagName("template")[1]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script> </body> </html>