I am trying to append to two <nav>s. But only second is updated. What am I missing?
I tried Array.from(socialMediaIcons).forEach and for loop, but with the same result.
var socialMedia = {
facebook: 'http://facebook.com/xyz',
twitter: 'http://twitter.com/xyz',
flickr: 'http://flickr.com/xyz',
youtube: 'http://youtube.com/xyz'
};
(() => {
const socialMediaIcons = document.querySelectorAll(".socialmediaicons");
const ulElement = document.createElement("ul");
Object.keys(socialMedia).forEach(key => {
const liElement = document.createElement("li");
const imageElement = document.createElement("img");
imageElement.src = `./images/${key}.png`;
liElement.appendChild(imageElement);
ulElement.appendChild(liElement);
});
socialMediaIcons.forEach(element => {
element.appendChild(ulElement)
});
})(socialMedia)<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Social Media Icons</title><link rel="stylesheet" href="style.css"></head><body><nav class="socialmediaicons">Add images below</nav><h1>Welcome</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, praesentium, reprehenderit, eos, eligendi iure eaque culpa vel distinctio quibusdam amet laudantium aut ea fugit magni quidem iste fugiat sunt voluptate.</p><nav class="socialmediaicons">Add images below</nav><script src="script.js"></script></body></html>