HTML usado na aula

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Criando Novos Elementos no DOM</title>
  <script src="./index.js"></script>
</head>

<body>
  <h1>Criando Novos Elementos no DOM</h1>

  <button onclick="addInput()">Adicionar Input</button>

  <ul id="inputs"></ul>
</body>

</html>

Criando novos elementos no DOM com javascript

  1. Criar o elemento com a função createElement()
  2. Adicionar conteúdo a esse elemento
  3. Adicionar esse elemento como filho de algum outro
function addInput() {
  const ul = document.getElementById('inputs')

  const newLi = document.createElement('li')
  newLi.className = 'list-item'
  newLi.innerText = 'Novo input: '

  const newInput = document.createElement('input')
  newInput.type = 'text'
  newInput.name = 'input'

  newLi.appendChild(newInput)
  ul.appendChild(newLi)
}