Actualmente estoy trabajando en una página que requiere llenar un div programáticamente con un montón de HTML como este código de muestra
<div id="Element"> <div class="tooltiptext top both"> <div class="editorMenuButton"> <span>Editor Menu</span> <img src="https://github.com/..." /> </div> <div class="diceButton"> <img src="https://github.com/..." /> </div> </div> </div>en este momento, estoy haciendo esto de la siguiente manera
Element.innerHTML = "<div class='tooltiptext top both'><div class='editorMenuButton'><span>Editor Menu</span><img src='https://github.com/...' /></div><div class='diceButton'><img src='https://github.com/...' /></div></div>";lo que definitivamente funciona, pero usar una cadena para pasar HTML parece que probablemente no sea la forma correcta/mejor/profesional de hacerlo. ¿Hay una mejor manera?
¡Gracias!
Sin involucrar ninguna biblioteca/marco externo, javascript simple le permite crear elementos:
var mydiv = document.createElement('div');consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement ]
Puede agregar varias propiedades según sea necesario:
mydiv.className = 'tooltiptext top both';consulte https://developer.mozilla.org/en-US/docs/Web/API/Element
Luego agregue estos elementos creados a otros elementos
Element.appendChild(mydiv);consultehttps://developer.mozilla.org/en-US/docs/Web/API/Element/append
Hay varias bibliotecas que hacen que esto sea un poco más fácil, como metaflux.
Bueno, en algunos casos tiene sentido usar una cadena, pero si necesita algo más estructurado, puede usar document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement