Javascript - 使用 document.execcommand 添加行现有表，但我犯了一些错误，但我不知道它在哪里

Question

我正在开发编辑器，但我无法理解这个范围概念。 我想使用 exec 命令添加表的第一行。我在下面插入了一张图片。

My expected output image

 function addRow() {
    let range = document.createRange();
    let sel = window.getSelection();
    let el = document.querySelector("tbody");
    range.setStartBefore(el.firstChild);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    let b = `<tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>`;
    document.execCommand("insertHTML", false, b);
  }

<table class="table table-bordered" contenteditable="true">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <button onclick="addRow()">Add Row</button>
  
 

Answer 1

您可以使用insertAdjacentHTML将 HTML 文本插入到任意位置。

function addRow() {
    let el = document.querySelector("tbody");    
    let newRow = getRow(["Mary","Moe","mary@example.com"]);
    el.insertAdjacentHTML("afterbegin", newRow);
 }
 
 function getRow(dataArray) {
    let rowData = dataArray.map(data => `<td>${data}</td>`).join("");
    return `<tr>${rowData}</tr>`;
    
 }

<table class="table table-bordered" contenteditable="true">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <button onclick="addRow()">Add Row</button>