Is there any way to add a pre-specified element to a parent in JS?

Question

Basically, I want to be able to add this code to the end of a parent div:

<br>
<div class="newPlayer">
  <h3>Player ${playerCount}</h3>
  <hr>
  <p>Name:</p>
  <input type="text" id="player${playerCount}"></input>
</div>

Here's what I'm currently using:

function newPlayer(){
  playerCount++;
  document.getElementById("players").innerHTML = document.getElementById("players").innerHTML + `<br><div class="newPlayer">
        <h3>Player ${playerCount}</h3>
        <hr>
        <p>Name:</p>
        <input type="text" id="player${playerCount}"></input>
      </div>`
}

Which works, but it refreshes all the inputs which is annoying. Any better methods?

Answer 1

It might look something like this. Taking the createElement and Appendchild solutions.

function newPlayer(){
playerCount++;
document.getElementById("players").appendChild(document.createElement(`
   <br>
   <div class="newPlayer">
     <h3>Player ${playerCount}</h3>
     <hr>
     <p>Name:</p>
     <input type="text" id="player${playerCount}"></input>
   </div>
 `);

}

Answer 2

Of course! Check Element.appendChild

Node.appendChild()
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

Newer API available!
TheElement.append() method supports multiple arguments and appending strings.

Syntax
element.appendChild(aChild)