When running this code, I encountered an error in the console (TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'). Can someone help me identify where I made a mistake and provide guidance on how to resolve this issue?
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, parentElement) {
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 deletable");
});
tdAction.appendChild(deleteBtn);
parentElement.appendChild(tr);
}