I created element with javascript. How can I append another element into it?

Question

I created element that draws rectangle. How can I create another element that would append a player input into it? Whenever I try to append with the code bellow, it says this error:

Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at HTMLButtonElement. (jscript.js:16:57)

Thanks in advance.

//Clicking a button will add another player into the counter.
let playerButton = document.getElementById("addPlayer")
let playerInput = document.getElementById("playerName");
let playerId = 0;

playerButton.addEventListener("click", function() {
  if (!playerInput.value) {
    alert("You have to write a name")
  } else {
    const active_player = document.createElement("div" + playerId)
    active_player.setAttribute("id", "act_player")
    const playerName = document.createElement("p")
    document.getElementById("players").appendChild(active_player)
    document.getElementById("active_player").appendChild(playerName.value)
    playerId++
    console.log(playerName)
  }
})

.group:after {
  content: "";
  display: table;
  clear: both;
}

body {
  width: 80em;
  margin: 0 auto;
}

.playerPick {
  text-align: center;
}

#act_player {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  height: 40em;
  width: 25em;
  border: solid black 1px;
}

<div class="playerPick">
  <h1>UNO SCORE COUNTER</h1>
  <button id="addPlayer">Add Player</button>
  <input type="text" placeholder="Enter your name here" id="playerName">
</div>

<div id="players"></div>

Answer 1

In this line:

document.getElementById("active_player").appendChild(playerName.value)

You are trying to get an id of active_player, but you are creating a component with and id of act_player on this line:

active_player.setAttribute("id", "act_player").

It should work if both ids match.

Answer 2

There were few typos and logical errors in your code.

I think, this is what you're looking for.

let playerButton = document.getElementById("addPlayer")
let playerInput = document.getElementById("playerName");
let playerId = 0;

playerButton.addEventListener("click", function() {
  if (!playerInput.value) {
    alert("You have to write a name")
  } else {
    var active_player = document.getElementById("act_player");
    if (active_player === null) {
      active_player = document.createElement("div");
      active_player.setAttribute("id", "act_player");
    }
    const playerName = document.createElement("p");
    playerName.innerText = playerInput.value;
    document.getElementById("players").appendChild(active_player);
    document.getElementById("act_player").appendChild(playerName);
    playerId++;
  }
});

.group:after {
  content: "";
  display: table;
  clear: both;
}

body {
  width: 80em;
  margin: 0 auto;
}

.playerPick {
  text-align: center;
}

#act_player {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  height: 40em;
  width: 25em;
  border: solid black 1px;
}

<div class="playerPick">
  <h1>UNO SCORE COUNTER</h1>
  <button id="addPlayer">Add Player</button>
  <input type="text" placeholder="Enter your name here" id="playerName">
</div>

<div id="players"></div>