title: Passing HTML through JavaScript
body: <h2>The goal</h2>
  
  <p>Pass to the DOM strings with HTML and render it.</p>
  
  <h2>The scenario</h2>
  
  <p>I'm extending properties of an observable (with KnockoutJS) using the follow syntax:</p>
  
  <pre><code>self.showDetails.subscribe(function (context) {
      var details = this.showDetails();
      details.nameWithCnpj = context.name() + " &lt;small&gt;" + context.cnpj() + "&lt;/small&gt;";
  }, this);
  </code></pre>
  
  <p>If you pay attention on the following line, you can see the HTML on it:</p>
  
  <pre><code>details.nameWithCnpj = context.name() + " &lt;small&gt;" + context.cnpj() + "&lt;/small&gt;";
  </code></pre>
  
  <p>When the <code>&lt;small&gt;&lt;/small&gt;</code> tag arrives on the HTML, it is rendered as string instead of vanilla HTML.</p>
  
  <p>The container that houses the <code>nameWithCnpj</code> (using KnockoutJS) is the following:</p>
  
  <pre><code>&lt;h2 class="bold float-left" data-bind="text: nameWithCnpj"&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>So I ask: <strong>How can I teach to JavaScript (or HTML) that the <code>nameWithCnpj</code> variable should be a DOM element instead of a simple string?</strong></p>