I want to use a template literal, i.e. backticks, to insert elements from an array into my HTML. Essentially, I want to create my own extremely simple templating system.
I expected forEach
to work, with each iterated callback just inserting the returned text. However, it just returns undefined
, e.g.:
const myArray = ['square', 'triangle', 'circle'];
document.querySelector('div').innerHTML = `
<p>Some shapes:<\p>
<ul>
${myArray.forEach(elmt => `
<li>${elmt}</li>
`)}
</ul>
`;
<div></div>
So, how do I do this?