时间戳

首页 > 解决方案 > 我试过这个控制台问题。TypeError：无法在“Node”上执行“appendChild”：参数 1 不是“Node”类型

javascript - 我试过这个控制台问题。TypeError：无法在“Node”上执行“appendChild”：参数 1 不是“Node”类型

问题描述

我不明白当我运行此代码时我错过了哪里在控制台中显示错误（TypeError：无法在'Node'上执行'appendChild'：参数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");
}

标签： javascriptajaxdomerror-handlingaxios

解决方案

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

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

推荐阅读