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

【问题标题】：i am tried this console problem. TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'我试过这个控制台问题。 TypeError：无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型
【发布时间】：2019-07-14 14:05:45
【问题描述】：

我不明白当我运行此代码时我在哪里错过了在控制台中显示错误（TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type '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");
}

【问题讨论】：

你在调用appendChild时错误引用了deleteBtn和tr

标签： javascript ajax dom error-handling axios

【解决方案1】：

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

【讨论】：