Cuando agrego <br> a través de DOM, no funciona correctamente... El <br> no está haciendo su trabajo. Todo lo demás funciona perfectamente bien. Creo que es un problema con el método .append() ...

Aquí está la demostración en vivo ( Nota: la demostración en vivo ahora está arreglada. Pero el código a continuación no está arreglado) Aquí está el código:

JS:

 const urls = [ { src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtFPba2-cBeIyhZ3Sxlkd2fGZegsdcqEEoww&usqp=CAU", name: "John Doe", email: "foobar@example.com" } ]; urls.forEach((person) => { const profile = document.createElement("div"); const img = document.createElement("img"); img.src = person.src; const hr = document.createElement("hr"); const name = document.createTextNode("Name: " + person.name); const br = document.createElement("br"); const email = document.createTextNode("Email: " + person.email); profile.append(img, hr, name, br, email); document.body.append(profile, br); });

CSS:

 div { border: 5px solid #ca6702; width: 300px; height: 500px; margin: 0 auto; background-color: #2a9d8f; } img { width: 300px; border: 4px solid #264653; box-sizing: border-box; border-radius: 50%; } hr { height: 3px; background-color: #e9d8a6; }