MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Document.createElement()

 

Em um documento HTML, o método Document.createElement() cria o elemento HTML especificado ou um HTMLUnknownElement se o nome do elemento dado não for conhecido.

Em um documento XUL, o elemento XUL especificado é criado.

Em outros documentos, ele cria um elemento com um namespace URI null.

Sintaxe

var elemento = document.createElement(nomeDaTag);
  • elemento é o objeto Element criado.
  • tagName é uma string que especifica o tipo do elemento a ser criado. O nodeName do elemento criado é inicializado com o valor da tagName. Não use nomes qualificados (como "html:a") com este método.

Exemplo

Este código cria uma nova <div> e a insere antes do elemento com ID "div1".

HTML

<!DOCTYPE html>
<html>
<head>
  <title>||Trabalhando com elementos||</title>
</head>
<body>
  <div id="div1">O texto abaixo foi criado dinamicamente.</div>
</body>
</html>

JavaScript

document.body.onload = adcElemento;

function adcElemento () { 
  // cria um novo elemento div 
  // e dá à ele conteúdo
  var divNova = document.createElement("div"); 
  var conteudoNovo = document.createTextNode("Olá, cumprimentos!"); 
  divNova.appendChild(conteudoNovo); //adiciona o nó de texto à nova div criada 

  // adiciona o novo elemento criado e seu conteúdo ao DOM 
  var divAtual = document.getElementById("div1"); 
  document.body.insertBefore(divNova, divAtual); 
}

Notas

  • Quando chamada em um objeto de documento marcado como um documento HTML, createElement() torna seu argumento caixa-baixa antes de criá-lo.
  • Para criar um elemento com um nome qualificado e namespace URI, use document.createElementNS().
  • Antes do Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) você podia incluir os símbolos de menor que e maior que em volta da tagName no modo quirks; a partir do Gecko 2.0, a função comporta-se da mesma forma em ambos os modos quirks e estrito.
  • A partir do Gecko 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16), createElement(null) funciona como createElement("null"). Note que o Opera torna null uma string, mas ambos Chrome e Internet Explorer lançarão erros.
  • A partir do Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) createElement() não mais usa a interface HTMLSpanElement quando o argumento é  "bgsounds", "multicol", or "image".  Ao invés disso, HTMLUnknownElement é usado para "bgsound", "multicol" e HTMLElement HTMLElement é usado para "image".
  • A implementação Gecko de createElement não se conforma à especificação DOM para documentos XUL e XHTML: localName e namespaceURI não estão definidos para null no elemento criado. Veja bug 280692 para detalhes.

Especificações

Etiquetas do documento e colaboradores

 Colaboradores desta página: teoli, nicholascamp
 Última atualização por: teoli,