я пробовал эту проблему консоли.Ошибка типа: не удалось выполнить команду appendChild на узле: параметр 1 не относится к типу узла

Question

Я не понимаю, где я ошибаюсь, когда я запускаю этот код, в консоли отображается ошибка (Ошибка TypeError: Не удалось выполнить 'appendChild' на 'Node': параметр 1 не относится к типу 'Node'.)Вы говорите мне, как я могу решить эту проблему?

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 s, вы получаете эту ошибку.Вы не можете добавлять строки как дочерние к элементам DOM, используя метод appendChild().

Подробнее читайте здесь: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#Returns