title: Create HTML using javascript with context/variables
body: <p>I want to create HTML from stored objects using javascript. They include buttons with onclick functions which call a function inside the object.</p>
  
  <p>I tried creating every node using document.createElement("Div") and setting its content/classes... but found this solution to be very clunky.</p>
  
  <p>Currently I am setting the innerHTML of my node to a string I created, which is  way more readable.</p>
  
  <pre><code>let objHTML = document.createElement("Div");
  objHTML.innerHTML = 
  `&lt;div class="ObjWrap ${status}"&gt;
      &lt;p class="objName"&gt;${name}&lt;/p&gt;
      &lt;p class="objContent"&gt;${content}&lt;/p&gt;
      &lt;button class="objEdit" onclick="${edit(evt)}"&gt;e&lt;/button&gt;
      &lt;button class="objActive" onclick="${activity(evt)}"&gt;x&lt;/button&gt;
  &lt;/div&gt;`;
  </code></pre>
  
  <p>The edit and activity functions are local and access variables of the object, so I cant write "onclick="edit(evt)"... - but my solution also doesnt work, i guess the edit and activity functions are just evaluated and being put in the html. I could use eventlisteners instead of the onclick events on the buttons, but this would again not be as readable and I would also have to access the button again to attach the eventlistener (in this case something like objHTML.getElementsByTagName('div')[0].getElementsByTagName('div')[0].getElementsByTagName('button ')[0/1]).</p>
  
  <p>My question is how can I create my HTML while keeping it as readable as it is and allowing me to add onclick functions which reference a variable to a button/any element. I cant use Ids since these elements are being created multiple times.</p>
  
  <p>Edit: Codepen to show what I mean, cut out of context so some things might not make sence: <a href="https://codepen.io/anon/pen/jdEqwQ" rel="nofollow noreferrer">https://codepen.io/anon/pen/jdEqwQ</a></p>