Estoy escribiendo una secuencia de comandos para una extensión de aplicación de tema Shopify destinada a buscar un div específico en la página y reemplazarlo con mi contenido. Sin embargo, con todos los diversos temas disponibles en Shopify, la forma en que los desarrolladores etiquetan este div no es consistente. Me gustaría compilar todas las combinaciones posibles y tenerlas listas en la aplicación para encontrar este div en particular e inyectar mi contenido. Empecé simplemente con esto...
document.getElementsByClassName('my__div')[0].innerHTML = 'new content'; document.getElementsByClassName('my--div')[0].innerHTML = 'new content';Durante la prueba, funcionó cualquier tema con 'my__div'. Cualquier tema con 'my--div' no lo hizo.
Volteé las líneas del código y vi que obtuve el efecto inverso.
¿Qué hace que la segunda línea falle cuando la primera línea no se puede ejecutar? ¿Y hay una declaración if que pueda usar para que funcione en todos los escenarios?
¡Gracias!
Teemu me dirigió a esta solución. Pensé en publicar el código de trabajo para ayudar a futuros visitantes...
var x = document.querySelectorAll(".my--div, .my__div"); var i; for (i=0; i < x.length; i++) { x[i].innerHTML = 'new content'; }Ahora puedo agregar la variación que encuentro en la primera línea y seguirá funcionando en cualquier tema en el que se cargue la aplicación.
¡Salud!