js template literals html code example
Example 1: javascript string interpolation
var animal = "cow";
var str=`The ${animal} jumped over the moon`;
Example 2: javascript template literals
let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
Example 3: using template literals to create html
const createMarkup = function createMarkup(data) {
const markup =
`<ul id="listItem-${data.name}">
<li>Name: ${data.name}</li>
<li>Age: ${data.age}</li>
<li>Gender: ${data.gender}</li>
<li>Fav. Colour: ${data.colour}</li>
<li>Lucky Number: ${data.number}</li>
</ul>`;return markup;
};
Example 4: javascript template literals html
const person = {
name: 'TopCoder2021',
job: 'Software Developer,
city: 'Los Angeles',
bio: 'Tony is a really cool guy that loves to code!'
}
const markup = `
<div class="person">
<h2>
${person.name}
</h2>
<p class="location">${person.city}</p>
<p class="bio">${person.bio}</p>
</div>
`;
document.body.innerHTML = markup