CodeGym/Cursos/Frontend SELF PT/Criação e remoção de elementos DOM

Criação e remoção de elementos DOM

Disponível

3.1 Criação de Elementos

Trabalhar com DOM (Document Object Model) não envolve apenas navegar pelos elementos existentes, mas também criar novos, inseri-los no documento e removê-los. Agora vamos dar uma olhada em vários métodos e abordagens para criar e remover elementos no DOM.

Método document.createElement()

O método principal para criar um novo elemento no DOM é document.createElement(). Este método aceita o nome da tag do elemento que você quer criar e retorna um novo elemento vazio.

Exemplo:

JavaScript
const newDiv = document.createElement('div');

Adicionando conteúdo ao elemento

Depois de criar um novo elemento, você pode preenchê-lo com conteúdo. Isso pode ser texto, outros elementos ou uma combinação de ambos.

Exemplo:

JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';

Também é possível usar a propriedade innerHTML para adicionar conteúdo HTML.

Exemplo:

JavaScript
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';

3.2 Inserindo Elementos no DOM

O elemento criado precisa ser adicionado ao documento. Existem vários métodos para inserir elementos no DOM:

1. Método appendChild()

O método appendChild() adiciona um elemento ao final da lista de elementos filho do elemento pai especificado.

Exemplo:

HTML
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is an old div element</div>
  </body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';

const body = document.querySelector('body');
body.appendChild(newDiv);

2. Método insertBefore()

O método insertBefore() adiciona um elemento antes de um elemento filho especificado do elemento pai.

Exemplo:

HTML
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is an old div element</div>
    <p>This is a paragraph</p>
  </body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';

const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);

3. Método append()

O método append() adiciona um ou mais nós ou strings ao final da lista de elementos filho do elemento pai especificado.

Exemplo:

HTML
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is an old div element</div>
  </body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';

const body = document.querySelector('body');
body.append(newDiv);

4. Método prepend()

O método prepend() adiciona um ou mais nós ou strings ao início da lista de elementos filho do elemento pai especificado.

Exemplo:

HTML
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is an old div element</div>
  </body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';

const body = document.querySelector('body');
body.prepend(newDiv);

3.3 Clonagem de Elementos

O método cloneNode() permite clonar um elemento. A clonagem pode ser profunda (copiando todos os elementos filhos) ou rasa (apenas o próprio elemento).

Exemplo de clonagem profunda:

HTML
<html>
  <head>
    <style>
      div {
        padding: 5px;
        min-height: 50px;
        color: #fff;
        border-bottom: 1px solid lightblue;
        background: mediumpurple;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div>
      This is a div element
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
      </ul>
    </div>
  </body>
</html>
JavaScript
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);

document.body.appendChild(clonedDiv);

Exemplo de clonagem rasa:

HTML
<html>
  <head>
    <style>
      div {
        padding: 5px;
        min-height: 50px;
        color: #fff;
        border-bottom: 1px solid lightblue;
        background: mediumpurple;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div>
      This is a div element
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
      </ul>
    </div>
  </body>
</html>
JavaScript
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);

document.body.appendChild(clonedDiv);

O próprio elemento <div> foi clonado, e isso pode ser visto através dos estilos, no entanto, seus elementos filhos (o nó de texto "This is a div element" e <ul>) não foram clonados.

3.4 Remoção de Elementos

1. Método removeChild()

O método removeChild() remove um elemento filho do elemento pai.

Exemplo:

HTML
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>
      This is a div element
      <p>This is a paragraph</p>
    </div>
  </body>
</html>
JavaScript
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);

2. Método remove()

O método remove() remove um elemento diretamente do DOM.

Exemplo:

HTML
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is a div element</div>
    <p>This is a paragraph</p>
  </body>
</html>
JavaScript
const element = document.querySelector('div');
element.remove();

3. Limpando o Conteúdo do Elemento

O método innerHTML pode ser usado para remover todo o conteúdo de um elemento atribuindo-lhe uma string vazia.

Exemplo:

HTML
<html>
  <head>
    <title>Document</title>
    <style>
      div {
        min-height: 200px;
        background: bisque;
      }
    </style>
  </head>
  <body>
    <div>
      This is a div element
      <p>This is a paragraph</p>
    </div>
  </body>
</html>
JavaScript
const element = document.querySelector('div');
element.innerHTML = '';

4. Removendo Todos os Elementos Filhos

Para remover todos os elementos filhos, você pode usar um loop ou o método innerHTML.

Exemplo com loop:

HTML
<html>
  <head>
    <title>Document</title>
  </head>
    <style>
      div {
        min-height: 200px;
        background: bisque;
      }
    </style>
  <body>
    <div>
      This is a div element
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
    </div>
  </body>
</html>
JavaScript
const parent = document.querySelector('div');
while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

Exemplo com innerHTML:

HTML
<html>
  <head>
    <title>Document</title>
      <style>
        div {
          min-height: 200px;
          background: bisque;
        }
      </style>
  </head>
  <body>
    <div>
      This is a div element
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
      </ul>
    </div>
  </body>
</html>
JavaScript
const parent = document.querySelector('div');
parent.innerHTML = '';
1
Tarefa
Frontend SELF PT,  nível 41lição 2
Bloqueado
Novo parágrafo
Novo parágrafo
1
Tarefa
Frontend SELF PT,  nível 41lição 2
Bloqueado
Inserção de elemento
Inserção de elemento
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário