26.11.2024

Adicionando HTML a um Container Sem Usar innerHTML e Tags Extras

Resumo Rápido

Adicione elementos ao DOM usando document.createElement e appendChild. Se precisar inserir strings HTML sem usar innerHTML, utilize DOMParser.

Exemplo:

// Obtenha uma referência ao nosso container
const container = document.querySelector('#container');

// Crie um novo div
const elem = document.createElement('div');

// Defina o texto do conteúdo
elem.textContent = 'Novo conteúdo';

// Adicione o elemento ao container
container.appendChild(elem);

Quer ver uma abordagem mais sofisticada? Vamos seguir em frente e trabalhar com strings!

// Crie um novo conteúdo HTML como um objeto DOM
const html = new DOMParser().parseFromString('<div>Novo conteúdo</div>', 'text/html');

// Insira o novo elemento no container
container.appendChild(html.body.firstChild);

Adição Elegante de Conteúdo

Ao trabalhar com conteúdo dinâmico, você deve considerar recursos de reprodução de mídia e interatividade. Aqui estão alguns métodos para usuários mais avançados.

Usando insertAdjacentHTML

O método insertAdjacentHTML insere conteúdo ao lado de um elemento especificado, evitando interrupções indesejadas na reprodução de mídia e uma estrutura excessiva.

Exemplo:

// Adicione um novo bloco diretamente no container
container.insertAdjacentHTML('beforeend', '<div id="newContent">Gandalf 🧙‍♂️ está ao seu lado</div>');

Poderosas Capacidades do DocumentFragment

DocumentFragment atua como um container invisível que é leve e eficiente. Essa abordagem permite que você crie nós do DOM na memória e depois os adicione ao documento em massa.

Uso de exemplo:

// Prepare-se para adicionar um novo elemento
let fragment = document.createDocumentFragment();

// Adicione informações
fragment.appendChild(document.createTextNode('Mais informações'));

// Faça alterações no documento
container.appendChild(fragment);

Adicionando Elementos Gradualmente

createElement e appendChild são ideais para aqueles que desejam controle total sobre a criação e a posição de elementos.

// Crie e adicione elementos sequencialmente
for (let i = 0; i < data.length; i++) {
    let item = document.createElement('div');
    item.textContent = data[i];
    container.appendChild(item);
}

Visualização

Adicionar HTML é como construir uma parede de tijolos: colocamos os tijolos de forma firme um a um em vez de pintar toda a parede de uma vez.

Parede antes: [|🧱|    |    |    |]
Adicionando tijolos um a um.

let novo_tijolo = document.createElement('tijolos');
container.appendChild(novo_tijolo);
Parede depois: [|🧱|🧱🧱|🧱🧱|🧱🧱|]

Não pintamos toda a parede de uma vez:
innerHTML = "🖌🧱🧱🧱🧱";
Será que tem tinta suficiente? 🧐

Adicione HTML Como um Profissional

Tarefas Diferentes Requerem Ferramentas Diferentes

Quando vários elementos precisam ser adicionados, é importante preservar recursos. DocumentFragment pode acelerar o processo. insertAdjacentHTML e createElement + appendChild ajudam a otimizar as atualizações do DOM.

Gerenciando Eventos

HTML dinâmico muitas vezes envolve a adição de elementos interativos. Em tais casos, crie manipuladores de eventos para manter a interatividade.

// Rastreie eventos no container
container.addEventListener('click', function(event) {
    if(event.target.matches('.interativo')) {
        // Lidar com o clique
    }
});

Cuidado com Layouts

Elementos adicionados podem impactar significativamente o layout. Use estilos diretamente ou com classes para evitar alterações não intencionais.

Atenção ao Desempenho

Adicionar HTML afeta a velocidade da página. A segurança dos dados é igualmente importante. Use DocumentFragment e métodos relevantes para garantir eficiência e proteção contra injeções de código.

Recursos Úteis

1. Node: método appendChild() - Web API | MDN — Detalhes sobre appendChild().
2. Por que createElement é melhor que innerHTML? - Stack Overflow — Razões para usar a criação de elementos em vez da injeção de HTML.
3. .append() - Documentação da API jQuery - O equivalente jQuery de appendChild.
4. Modificando o Documento — Um guia sobre como modificar o documento.
5. <template>: Elemento de Conteúdo de Template - HTML | MDN — Informações sobre o uso de templates em HTML.
6. JavaScript insertAdjacentHTML e beforeend — Visão geral do insertAdjacentHTML e suas opções.

Video

Navigation