document.createElement() not working on chrome

here’s my javascript code so far

var game= document.getElementById('game-board');
var grid= document.createElement('section');
grid.setAttribute('class','grid');
game.appendChild('grid');

for (i=0; i<cardsArray.length; i++){
    var card= document.createElement('div');
    card.classList.add('card'),
    card.dataset.name= cardArray[i].name;
    card.style.backgroundImage='url(${cardsArray[i].img})';
    grid.appendChild(card);
};

did I do anything wrong?
Please I need help

There is a code for another project but it’s also not working

var form= document.querySelector('form');
    var todoList = document.querySelector('ul');
    var button = document.querySelector('button');
    var input = document.getElementById('user-todo');
    form.addEventListener('submit',function(e){
    e.preventDefault();
    todoMaker(input.value);
    input.value='';
    })
    var todoMaker = function(text){
        var todos= document.createElement('todos');
        todos.textContent = text;
        todoList.appendChild('todos');
    }
    button.addEventListener('click',function(){
    while(todoList.firstChild){todoList.removeChild(todoList.firstChild);}})

The document.createElement is also not working. I cannot add new todos on chrome

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

game.appendChild(grid); // append the child element, not string value 

Hi,
I corrected the code but it is still not working.

///
var game= document.getElementById(‘game-board’);
var grid= document.createElement(‘section’);
grid.setAttribute(‘class’,‘grid’);
game.appendChild(grid);

for (i=0; i<cardsArray.length; i++){
var card= document.createElement(‘div’);
card.classList.add(‘card’),
card.dataset.name= cardArray[i].name;
card.style.backgroundImage=‘url(${cardsArray[i].img})’;
grid.appendChild(card);Preformatted text

Can you explain exactly what is not working?

  1. You have a typo for the array name, you have cardsArray and cardArray.

  2. You have a comma instead of a semicolon after card.classList.add(‘card’)

  3. You need to make sure to use backticks for the template literals string.

  4. The .card element will collapse (height 0) if all that is inside it is a background-image with no dimensions set on it.

Here is your code with some changes (just guessing about the array)
https://jsfiddle.net/2cw6bq8t/