Create multiple tags with different attributes in JavaScript

Question

I have a problem with JavaScript and cannot find a solution. I would like to create 4 HTML tags in JavaScript. The concern is that each of this tags have a different innerHTML and href. I have tried to create several "newA" variables every time I wanted to create one, but obviously it is not possible. If you have any questions, I am available and comment here. Here is the code I want to generate in JavaScript :

        <div>
            <img alt = "SakuraLogo" 
                 src = "./picture/global/logo/greySakuraLogo.png"/>
            <a href = "#">FAQ</a>
            <a href = "#">Mentions légales</a>
            <a href = "#">CGU</a>
            <a href = "#">Politique de confidentialité</a>
            <a href = "#">Plan du site</a>
            <span>reJoignez-nous</span>
            <img alt = "FacebookLogo"
                 src = "./picture/global/logo/greyFacebookLogo.png"/>
            <img alt = "TwitterLogo"
                 src = "./picture/global/logo/greyTwitterLogo.png"/>
            <img alt = "YoutubeLogo"
                 src = "./picture/global/logo/greyYoutubeLogo.png"/>
        </div>

You can create all of those using javascript. But, where do you get the information from that will be used for each tag? — ATD
– ATD, Commented Oct 21, 2020 at 8:11

secan · Accepted Answer · 2020-10-21 09:49:28Z

This code should do the job, as described in your question:

const links = [{
    url: 'https://www.domain.tld/faq/',
    text: 'FAQ',
    position: 0
  },
  {
    url: 'https://www.domain.tld/terms/',
    text: 'Mentions légales',
    position: 1
  },
  {
    url: 'https://www.domain.tld/gcu/',
    text: 'CGU',
    position: 2
  },
  {
    url: 'https://www.domain.tld/privacy/',
    text: 'Politique de confidentialité',
    position: 3
  },
  {
    url: 'https://www.domain.tld/sitemap/',
    text: 'Plan du site',
    position: 4
  },
];

const logoImg = document.getElementById('sakura-logo');

/*
 * As <a> tags will be inserted one by one right after the logo image
 * you have to sort them from last to first
 */
links.sort((a, b) => b.position - a.position).forEach(link => {
  const a = document.createElement('a');
  a.setAttribute('href', link.url);
  a.innerHTML = link.text;
  logoImg.insertAdjacentElement('afterend', a);
});

<div>
  <img id='sakura-logo' alt="SakuraLogo" src="./picture/global/logo/greySakuraLogo.png" />
  <span>reJoignez-nous</span>
  <img alt="FacebookLogo" src="./picture/global/logo/greyFacebookLogo.png" />
  <img alt="TwitterLogo" src="./picture/global/logo/greyTwitterLogo.png" />
  <img alt="YoutubeLogo" src="./picture/global/logo/greyYoutubeLogo.png" />
</div>

Anyway, you might want to consider adding an unordered list to contain all the links, so that you can fine-tune and style it:

const links = [{
    url: 'https://www.domain.tld/faq/',
    text: 'FAQ',
    position: 0
  },
  {
    url: 'https://www.domain.tld/terms/',
    text: 'Mentions légales',
    position: 1
  },
  {
    url: 'https://www.domain.tld/gcu/',
    text: 'CGU',
    position: 2
  },
  {
    url: 'https://www.domain.tld/privacy/',
    text: 'Politique de confidentialité',
    position: 3
  },
  {
    url: 'https://www.domain.tld/sitemap/',
    text: 'Plan du site',
    position: 4
  },
];

const logoImg = document.getElementById('sakura-logo');
const linkList = document.createElement('ul');
linkList.setAttribute('class', 'link-list')

/*
 * I am keeping the sorting from first to last, in case you might need it
 * but you can remove it, if the 'links' array is already sorted as desired
 * (in which case you are not going to need the 'position' property either)
 */
links.sort((a, b) => a.position - b.position).forEach(link => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.setAttribute('href', link.url);
  a.innerHTML = link.text;
  li.append(a);
  linkList.append(li);
});

logoImg.insertAdjacentElement('afterend', linkList);

.link-list {
  display: inline;
}

.link-list li {
  display: inline;
}

.link-list li::after {
  content: " | ";
}

.link-list li:last-child::after {
  content: "";
}

<div>
  <img id='sakura-logo' alt="SakuraLogo" src="./picture/global/logo/greySakuraLogo.png" />
  <span>reJoignez-nous</span>
  <img alt="FacebookLogo" src="./picture/global/logo/greyFacebookLogo.png" />
  <img alt="TwitterLogo" src="./picture/global/logo/greyTwitterLogo.png" />
  <img alt="YoutubeLogo" src="./picture/global/logo/greyYoutubeLogo.png" />
</div>

Collectives™ on Stack Overflow

Create multiple tags with different attributes in JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related