title: Multiple cells selection programmatically from a table in a webpage with javascript (chrome bug?)
body: <p>I would like to make a selection similar to excel. I have a table, but this table comes from an external source. In this table when someone selects four cell (as excel B2:C3) I would like to create a selection which able to copy, paste, and other similar operations.</p>
  <p>My cells - to keep things simple - are DOM elements, in these variables: b2, b3, c2, c3.</p>
  <p>Relevant code part is here:</p>
  <pre><code>let range = document.createRange();
  range.selectNode(c3);
  range.insertNode(c2);
  range.insertNode(b3);
  range.insertNode(b2);
  let sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  </code></pre>
  <p>But this code rearranges the DOM structure.</p>
  <p>Here is the codepen to reproduce it: <a href="https://codepen.io/sarkiroka/pen/wvGRzdv" rel="nofollow noreferrer">https://codepen.io/sarkiroka/pen/wvGRzdv</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function makeSelection(){
    let b2=document.getElementById('b2');
    let b3=document.getElementById('b3');
    let c2=document.getElementById('c2');
    let c3=document.getElementById('c3');
    let sel=window.getSelection();
    sel.removeAllRanges();
    let range=document.createRange();
    range.selectNode(c3);
    range.insertNode(c2);
    range.insertNode(b3);
    range.insertNode(b2);
    sel.addRange(range);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="makeSelection()"&gt;Make Selection&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;table border=1 cellspacing=0&gt;
    &lt;tr&gt;
      &lt;td&gt;A1&lt;/td&gt;
      &lt;td&gt;B1&lt;/td&gt;
      &lt;td&gt;C1&lt;/td&gt;
      &lt;td&gt;D1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;A2&lt;/td&gt;
      &lt;td id="b2"&gt;B2&lt;/td&gt;
      &lt;td id="c2"&gt;C2&lt;/td&gt;
      &lt;td&gt;D2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;A3&lt;/td&gt;
      &lt;td id="b3"&gt;B3&lt;/td&gt;
      &lt;td id="c3"&gt;C3&lt;/td&gt;
      &lt;td&gt;D3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;A4&lt;/td&gt;
      &lt;td&gt;B4&lt;/td&gt;
      &lt;td&gt;C4&lt;/td&gt;
      &lt;td&gt;D4&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The expected result is similar to what you see on the screenshot below (from excel). It's not just visual feedback (background color, font-color, border, etc), which I would like to have, but also to be able to copy the content of these cells to the clipboard for example.</p>
  <p><a href="https://i.stack.imgur.com/1ZIrf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1ZIrf.png" alt="excel screenshot" /></a></p>
  <p>What do I do wrong?</p>
  <p>PS: chrome-only, native js</p>