ارور برای تایپ المنت در کنسول

سلام من کد رو حتی عیننا شبیه نوشتم ولی به این ارور بر میخورم...

این ارور توی کنسول برای چیه؟

index.js:18 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

سلام وقتت بخیر .

این ارور میگه شما appendChild رو روی متغییری که از جنسNode نیست صدا زدید در حالی که فقط روی Node‌ها وجود داره .

احتمالا در بخشی که المنت مورد نظر رو انتخاب میکنید خطایی دارید .

اگر مشکل حل نشد کدتون رو بفرستید تا بتونم بیشتر راهنمایی کنم .

موفق باشید.

علیرضا ایمانی ۳۱ خرداد ۱۴۰۱، ۱۸:۵۵

سلام مجدد پاسخ شما کاملا منتقی هست اما اتفاقا کدی که نوشتم یک نود تولید میکنه در ادامه کد رو خدمتتون ارسال میکنم...

این کد html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Render UI with Vanilla Jstitle>
    <style>
      body {
        background-color: #007bec;
      }
      .container {
        display: flex;
      }
      .cart {
        width: 200px;
        height: 200;
        border-radius: 10px;
        background-color: aliceblue;
        margin: 10px;
        padding: 15px;
      }
      span {
        display: block;
      }
    style>
  head>
  <body>
    <script src="./index.js" type="module">script>
  body>
html>

و این هم کد جی اس که مشکلم توی همین کد هست...

function generateElement(tagName, attributes, ...childs) {
  const sampleEl = document.createElement(tagName);
  console.log(sampleEl);
  if (attributes) {
    Object.keys(attributes).forEach((key) => {
      sampleEl.setAttribute(key, attributes[key]);
    });
  }
  if (childs) {
    childs.forEach((child) => {
      if ("string" === typeof child) {
        sampleEl.appendChild(document.createTextNode(child));
      } else {
        sampleEl.appendChild(child);
      }
    });
  }
  return sampleEl;
}
const nameEl = document.createElement("span");
nameEl.innerText = "Name = Behnam";
const ageEl = document.createElement("span");
ageEl.innerText = "Age = 24";
const card = document.createElement("div");
card.setAttribute("class", "cart");
const container = generateElement("div", { class: "container" }, [card]);
card.appendChild(nameEl);
card.appendChild(ageEl);
container.appendChild(card);
document.body.appendChild(container);

بهنام جوینده ۳۱ خرداد ۱۴۰۱، ۱۹:۰۶

ورودی سوم تابع generateElement رو اشتباه میدید احتمالا . در این کدی که فرستادید دارید ارایه پاس میدید و این طرف به صورت destructure بقیه ورودی هارو میگیرید که این کار درستی نیست. به جای کد زیر :

const container = generateElement("div", { class: "container" }, [card]);

به این صورت بنویسید :

const container = generateElement("div", { class: "container" }, card);

بهترین پاسخ

علیرضا ایمانی ۳۱ خرداد ۱۴۰۱، ۱۹:۱۸