Aquí está mi código:
let a = document.createElement('a'); a.role = "menuitem"; a.tabindex = "-1"; a.href = "#"; a.onclick = function() {reloadPageWithChanges()}; a.innerHTML = stories["Chapter1"]; let img = document.createElement('img'); img.src = `pictures/cars/car1.png`; img.style.marginRight = "3px"; img.style.marginLeft = "3px"; a.appendChild(img); body.appendChild(a); Lo que hace este código es que crea un enlace que al onclick vuelve a cargar la página (con algunos pequeños cambios en la interfaz de usuario). Este enlace contiene el nombre ( stories["Chapter1"] ) y una imagen al lado. Sin embargo, esta imagen siempre se coloca en el lado derecho del texto. Quiero que se coloque en el lado izquierdo, de modo que todos estos enlaces (si hay más de ellos) tengan imágenes alineadas a la izquierda. ¿Hay alguna forma de hacerlo usando el DOM de JavaScript?
Puedes usar a.prepend(img); en lugar de a.appendChild(img);
let a = document.createElement('a'); a.role = "menuitem"; a.tabindex = "-1"; a.href = "#"; a.onclick = function() { //reloadPageWithChanges() }; a.innerHTML = "myChapter"; //stories["Chapter1"]; let img = document.createElement('img'); img.src = `pictures/cars/car1.png`; img.style.marginRight = "3px"; img.style.marginLeft = "3px"; a.prepend(img); document.body.appendChild(a);