En el fragmento a continuación, tengo varias clases en la página. Creé una matriz basada en la lista de clases. Luego, intento pasar un literal de cadena a esa clase.
Esto funciona bien si paso una cadena simple, como 'Hello World', pero no funcionará con un SVG.
¿Alguna idea de por qué? No recibo ningún error con el SVG, simplemente no se muestra.
Aquí hay un ejemplo usando HTML simple
const myClasses = document.getElementsByClassName("myClass"); Array.prototype.forEach.call(myClasses, (myClass)=> { myClass.innerHTML = `<h3>Hello World</h3>`; }); <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div>Y aquí hay otro ejemplo usando la misma estructura, pero con un SVG
const myClasses = document.getElementsByClassName("myClass"); Array.prototype.forEach.call(myClasses, (myClass)=> { myClass.innerHTML = ` <svg class="myClass" width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <symbol id="btn-acc" viewBox="0 0 16 11"> <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z" fill="currentColor" /> </symbol> </svg> `; }); <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> const myClasses = document.querySelectorAll(".myClass"); myClasses.forEach((myClass) => { myClass.innerHTML = ` <svg width="16px" height="11px" viewBox="0 0 16 11" fill="black" xmlns="http://www.w3.org/2000/svg"> <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z" fill="currentColor" /> </svg> `; }); <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div> <div class="myClass"></div>