title: Appending html using native javaScript
body: <p>I need to append some html to an existing element using pure javaScript:</p>
  
  <pre><code>function create(htmlStr) {
    var frag = document.createDocumentFragment(),
      temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
      frag.appendChild(temp.firstChild);
    }
    return frag;
  }
  
  var target = document.querySelectorAll(".container-right");
  var fragment = create(
    '&lt;div class="freetext"&gt;&lt;p&gt;Some text that should be appended...&lt;/p&gt;&lt;/div&gt;'
  );
  document.body.insertBefore(fragment, document.body.childNodes[0]);
  </code></pre>
  
  <p>It's kind of working, but I have two questions:</p>
  
  <ol>
  <li><p>How can I make sure that the html fragment is appended to the div with the class <code>container-right</code> and not just the body? Changing the last line to <code>document.body.insertBefore(fragment, target);</code> doesn't work.</p></li>
  <li><p>How can I insert the html <strong>after</strong> the content in the target element - after the existing content - like jQuery's append()?</p></li>
  </ol>
  
  <p>Any help is much appreciated.</p>
  
  <p><a href="https://jsfiddle.net/bw1mrkzy/1/" rel="noreferrer">JsFiddle here</a>.</p>