Criação e Inserção de Elementos em JavaScript

Agora vamos aprender a criar novos elementos DOM via JavaScript e, em seguida, adicioná-los à página. Para isso, é usado o método createElement. O parâmetro deste método deve ser o nome da tag que deve ser criada.

Se o resultado de createElement for armazenado em uma variável, essa variável conterá um elemento, como se o tivéssemos obtido via querySelector.

A única diferença é que o nosso elemento não estará posicionado na página. Fora isso, podemos alterar seu texto, atributos, adicionar ouvintes de evento e, finalmente, posicioná-lo na página.

Para posicionar o novo elemento na página, usa-se o método appendChild. Este método deve ser aplicado ao elemento dentro do qual queremos colocar o nosso elemento. E o parâmetro do método deve ser o nosso novo elemento, criado anteriormente via createElement.

Vamos ver um exemplo prático. Suponha que temos uma div, e dentro dela - vários parágrafos:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Vamos criar um parágrafo, definir seu texto e colocá-lo na página, no final do bloco #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

O resultado da execução do código:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Dado um ol:

<ol id="elem"></ol>

Insira no final dele um li com o texto 'item'.

Dado um ol e um botão:

<ol id="elem"></ol>
<button id="button">click me</button>

Faça com que, ao clicar no botão, um li com o texto 'item' seja adicionado ao final da lista.