Método HTML DOM Element insertAdjacentElement()

Definição e uso

insertAdjacentElement() O método insere o elemento na posição especificada.

Posições válidas:

Valores Descrição
afterbegin Depois do início do elemento (primeiro filho).
afterend Depois do elemento.
beforebegin Antes do elemento.
beforeend Antes do final do elemento (último filho).

Exemplo

Exemplo 1

Inserir um elemento span após o título:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

Experimente você mesmo

Exemplo 2

Usando "afterbegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

Experimente você mesmo

Exemplo 3

Usando "beforebegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

Experimente você mesmo

Exemplo 4

Usando "beforeend":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

Experimente você mesmo

Sintaxe

element.insertAdjacentElement(position, element)

ou

node.insertAdjacentElement(position, element)

Parâmetros

Parâmetros Descrição
position

Obrigatório. Posição relativa ao elemento:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
element O elemento a ser inserido.

Suporte do navegador

Todos os navegadores suportam element.insertAdjacentElement()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte