Module 4: HTML from Strings and XSS

item.innerHTML = `
<h1> Hey how are ya?</h1>
`;
//Change the getter to a setter and put the HTML code inside.

const width = 500;
const src = `https://pic.jpg${width}`;
const desc = `cute pup`;
const myHTML = `
<div class="wrapper">
  <h2>${desc}</h2>
  <img src="${src}" alt="${desc}"/>
</div>
`;

item.innerHTML = myHTML;
//THE HTML IS JUST A STRING.
//We can't do class things like methods and stuff. it's not an element. It becomes an element once it's dumped.
//You first have to dump it first and then do stuff after the fact.

////The other option is:

//turn a string into a DOM element

const myFragment = document.createRange().createContextualFragment(myHTML);

//This fragment is turned into DOM elements and now you can do things like:
myFragment.querySelector('img');

document.body.appendChild(myFragment);