javascript - 我尝试过此控制台问题。 TypeError : Failed to execute 'appendChild' on 'Node' : parameter 1 is not of type 'Node'

Question

i dont understand where i miss-tack when i run this code show the error in console ( TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. ) can you tell me how can i solve this problem ?

import axios from "axios";

const BASE_url = "  http://localhost:3000/contacts";

window.onload = () => {
  const mytbody = document.querySelector("#mytbody");
  axios
    .get(BASE_url)
    .then(res => {
      res.data.forEach(function(contact) {
        createTDelement(contact, mytbody);
      });
    })
    .catch(err => console.log(err));
};

function createTDelement(contact, perentElement) {
  const tr = document.createElement("tr");

  const tdId = document.createElement("td");
  tdId.innerHTML = contact.tdId;
  tr.appendChild(tdId);

  var tdName = document.createElement("td");
  tdName.innerHTML = contact.name;
  tr.appendChild(tdName);

  const tdEmail = document.createElement("td");
  tdEmail.innerHTML = contact.email;
  tr.appendChild(tdEmail);

  const tdPhone = document.createElement("td");
  tdPhone.innerHTML = contact.phone ? contact.phone : "N/A";
  tr.appendChild(tdPhone);

  const tdAction = document.createElement("td");

  const editBtn = document.createElement("button");
  editBtn.className = "btn btn-warning";
  editBtn.innerHTML = "Edit";
  editBtn.addEventListener("click", () => {
    console.log("i am editable");
  });
  tdAction.appendChild(editBtn);

  const deleteBtn = document.createElement("button");
  deleteBtn.className = "btn btn-danger";
  deleteBtn.innerHTML = "Delete";
  deleteBtn.addEventListener("click", () => {
    console.log("i am editable");
  });
  tdAction.appendChild("deleteBtn");

  perentElement.appendChild("tr");
}

Answer 1

perentElement.appendChild("tr");和tdAction.appendChild("deleteBtn")将尝试将字符串“tr”和“deleteButton”作为子级添加到perentElement/tdAction中。因为字符串不是NodeElement，所以您会收到此错误。您不能使用appendChild()方法将字符串作为子项附加到DOM元素。

在这里进一步阅读:https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#Returns