<p>
<strong>Here's a bunch of links:</strong> <span></span>
</p>
<p>
<strong>Here's a bunch of links with the applied styles:</strong> <span class="fixed"></span>
(note the lack of underline in the spaces)
</p>
.fixed a {
display: inline-block;
}
let links = ['one', 'two', 'three', 'four'];
let makeLinks = () => {
let htmlLinks = '';
links.forEach((l) => {
// This spacing is unrealistic in vanilla JS,
// but you see it happen on "accident" in JSX
// fairly often, hence this example.
htmlLinks += `<a href="#"> ${l} </a> `;
});
return htmlLinks;
}
document.getElementsByTagName('span')[0].innerHTML = `<p>${makeLinks()}</p>`;
document.getElementsByTagName('span')[1].innerHTML = `<p>${makeLinks()}</p>`;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.