Why use cloneNode when I can clone a node using querySelector?
<p>Below two function does same thing - first they copy an element then clear the body and then add the element back. My question is which one is better and in what conditions cloneNode using function or the other one will not work ?</p>

<p><strong>Using querySelector</strong></p>

<pre><code>function noahArc(animal) {
  // Preserve the poor animal and its children
  var arc = document.querySelector(animal);

  // Flood the entire body with rage, water and thunder
  document.body.innerHTML = "";

  // Restore the preserved animal into the post-apocalyptic world
  document.body.appendChild(arc);
}

noahArc('.asd');
</code></pre>

<p><strong>Using cloneNode</strong></p>

<pre><code>function noahArc(animal) {
  // Preserve the poor animal and its children
  var arc = document.getElementsByClassName(animal)[0].cloneNode(true);

  // Flood the entire body with rage, water and thunder
  document.body.innerHTML = "";

  // Restore the preserved animal into the post-apocalyptic world
  document.body.appendChild(arc);
}

noahArc('asd');
</code></pre>