I am getting this error - Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Question

const cardsList = [
                    "fa fa-diamond",
                    "fa fa-paper-plane-o",
                    "fa fa-anchor",
                    "fa fa-bolt",
                    "fa fa-cube",
                    "fa fa-anchor",
                    "fa fa-leaf",
                    "fa fa-bicycle",
                    "fa fa-diamond",
                    "fa fa-bomb",
                    "fa fa-leaf",
                    "fa fa-bomb",
                    "fa fa-bolt",
                    "fa fa-bicycle",
                    "fa fa-paper-plane-o",
                    "fa fa-cube",
                    ];

const deck = document.querySelector('.deck');

function gameStart(){
        let cardShuffle = shuffle(cardsList);
        deck.innerHTML = "";
        for(let i = 0; i < cardShuffle.length; i++){
            deck.appendChild(cardShuffle);
      }
}

I am designing a memory game whenever I am calling the function gameStart() on window load, I am getting Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Your `shuffle` function is not returning a Node that can be appended to the DOM — Andrew Li, Jul 12 '18 at 17:41
`appendChild` expects to be passed a DOM node. It looks like you are passing a string instead. Please [read documentation](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild). — Felix Kling, Jul 12 '18 at 17:42
Can you all your full code. There is a lot of problems with your code. Query selector return an array of elements. You should loop via ``deck[i]``. — Gerardo BLANCO, Jul 12 '18 at 17:43
Create and append a text node. [Learn more about how the DOM works.](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) — Felix Kling, Jul 12 '18 at 17:43
As a comment, I do not believe this question deserves a down-vote. We come to Stack Overflow to ask questions, so we shouldn't be punishing inexperienced programmers for doing just that. — Brandon Dixon, Jul 12 '18 at 17:46
@brandon [definetly!](https://stackoverflow.blog/2018/04/26/stack-overflow-isnt-very-welcoming-its-time-for-that-to-change/) — Jonas Wilms, Jul 12 '18 at 17:48
@JonasW. it worked thank you so much, I am beginner in DOM manipulation. — Abhishek Singh, Jul 12 '18 at 17:49
@abishek glad to help :) (the next time you could directly comment under the answer, otherwise it might confuse others...) — Jonas Wilms, Jul 12 '18 at 17:50
@JonasW. for sure, but after editing my querySelector, I am getting a new error deck.appendChild is not a function — Abhishek Singh, Jul 12 '18 at 17:52
@abishek wait a minute ... `it worked` was related to the `querySelectorAll` comment? Why should that work? I was just trying to make Gerardo aware of his false statement — Jonas Wilms, Jul 12 '18 at 17:56
@JonasW. Sorry for my statement, actually my node error is gone — Abhishek Singh, Jul 12 '18 at 17:58

score 0 · Answer 1 · answered Jul 12 '18 at 17:49

0

"fa fa-diamond" seems like a class name to me. So if I assume that you want <div class="fa fa-diamond"></div>

In the loop, but could be better in a forEach:

let node = document.createElement('div');
node.className = cardShuffle[i];
deck.appendChild(node);

// will create a <div class="fa fa-diamond"></div>, ...

answered Jul 12 '18 at 17:49

progysm

1,072
6
7

actually it is li

Abhishek Singh

Jul 12 '18 at 18:16

Fantastisk · Answer 2 · 2018-07-12T18:08:52.793

I'm not sure what exactly you are trying to do, but if i had to guess, I think that you are trying to use font awesome.

Since you didn't provide the shuffle functionality I created a custom one here, which probably doesn't do what you want.

const cardsList = [
"fa fa-diamond",
"fa fa-paper-plane-o",
"fa fa-anchor",
"fa fa-bolt",
"fa fa-cube",
"fa fa-anchor",
"fa fa-leaf",
"fa fa-bicycle",
"fa fa-diamond",
"fa fa-bomb",
"fa fa-leaf",
"fa fa-bomb",
"fa fa-bolt",
"fa fa-bicycle",
"fa fa-paper-plane-o",
"fa fa-cube",
];
const deck = document.querySelector('.deck');
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
function gameStart(){
        let cardShuffle = shuffle(cardsList);
        deck.innerHTML = "";
        for(let i = 0; i < cardShuffle.length; i++){
            var node = document.createElement("i");
            node.className = cardShuffle[i];
            deck.appendChild(node);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
        <div class="deck"></div>
        <button onclick="gameStart();">Start game</button>
        
</body>
</html>

// Shuffle function from http://stackoverflow.com/a/2450976 My shuffle function — Abhishek Singh, Jul 12 '18 at 17:58
I have replaced the shuffle function with the one you provided :) — Fantastisk, Jul 12 '18 at 18:09

Jonas Wilms · Answer 3 · 2018-07-12T17:51:42.843

-1

You can use textContent or innerHTML to add text:

deck.textContent += cardShuffle;

appendChild just takes Nodes, which can be created with document.createElement.

edited Jul 12 '18 at 17:51

answered Jul 12 '18 at 17:46

Jonas Wilms

132,000
20
149
151

I am getting this error - Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

3 Answers3