Vamos ver como você pode criar nós com innerHTML e createElement(). Começaremos com innerHTML. innerHTML é uma propriedade dos objetos Element que você pode usar para definir sua marcação HTML. Com innerHTML, você pode definir a estrutura HTML de um elemento existente com uma string, criando todos os nós necessários. Este é um exemplo. Temos um div vazio e vamos adicionar alguns elementos dentro dele usando a propriedade innerHTML:

<div id="container">
  <!-- Add new elements here -->
</div>

Primeiro, precisamos selecionar o elemento pelo seu ID:

const container = document.getElementById("container");

Então, definimos a propriedade innerHTML do container para uma string. Esta string deve conter toda a marcação necessária para representar os nós e a estrutura que você deseja criar. Você pode pensar nisso como escrever HTML dentro de uma string.

<div id="container"></div>
<script src="index.js"></script>

const container = document.getElementById("container");
container.innerHTML = "<ul><li>Cheese</li><li>Tomato</li></ul>";

Definiremos o innerHTML deste elemento para uma lista não ordenada de ingredientes de pizza (queijo e tomate). Você também pode escrever a string em várias linhas se isso facilitar a compreensão da marcação. O importante é que a marcação represente com precisão a estrutura HTML que você deseja criar. Após executar este código, você verá a seguinte estrutura HTML se inspecionar sua marcação.

<div id="container">
  <ul>
    <li>Cheese</li>
    <li>Tomato</li>
  </ul>
</div>

Os novos nós foram criados e adicionados dinamicamente ao DOM depois que a string foi analisada. innerHTML pode ser muito útil para certos cenários. No entanto, ele possui alguns riscos de segurança com os quais você deve estar familiarizado. Você não deve usá-lo se não tiver controle total sobre a string. Por exemplo, se a string for inserida pelo usuário, você não deve usar innerHTML porque o usuário pode inserir conteúdo malicioso no seu site. Por causa disso, geralmente é recomendado usar textContent em vez disso, para inserir texto simples. Outra forma de criar um novo nó é usando o método createElement(). Com este novo método, você pode criar um novo elemento especificando seu nome de tag. Por exemplo, se você quiser criar um elemento de imagem, você passaria a tag img como uma string ao chamar este método:

document.createElement("img");

E você pode atribuir este novo objeto a uma variável:

const img = document.createElement("img");

O método createElement() retorna um novo objeto HTMLElement se o documento for um HTMLDocument. Caso contrário, ele retorna um objeto Element. Depois de ter este novo elemento pronto, você pode adicioná-lo ao DOM como um filho de outro elemento existente usando o método appendChild(), ou pode inseri-lo em um local específico usando outros métodos. Escolha aquele que melhor se adapta às suas necessidades.

<div id="container"></div>
<script src="index.js"></script>

const container = document.getElementById("container");
const img = document.createElement("img");
img.src = "https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/lasagna.jpg";
img.alt = "A slice of lasagna on a plate.";
container.appendChild(img);

Criar nós com innerHTML e createElement() permite que você manipule dinamicamente a estrutura e o conteúdo dos seus sites. Ao combinar essas técnicas, você pode criar aplicações web interativas.