Document.createElement()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

En un documento HTML, el método Document.createElement() crea un elemento HTML especificado por su tagName, o un  HTMLUnknownElement si su tagName no se reconoce. En un documento XUL, crea el elemento XUL especificado. En otros documentos, crea un elemento con un namespace URI null.

Para declarar el namespace URI del elemento, utiliza document.createElementNS().

Sintaxis

var element = document.createElement(tagName[, options]);

Parámetros

tagName

Cadena que especifica el tipo de elemento a crear. El nodeName del elemento creado se inicializa con el valor de tagName. No utilizar nombres reservados (como "html:a") con este método. Al ser invocado en un documento HTML, createElement() convierte tagName a minúsculas antes de crear el elemento. En Firefox, Opera, y Chrome, createElement(null) funciona como createElement("null").

optionsOptional
Un objeto opcional ElementCreationOptions que contiene una única propiedad named is, cuyo valor es el de la etiqueta name de un elemento personalizado definido previamente utilizando customElements.define(). Para compatibilidad con versiones anteriores de Elements specification, algunos navegadores podrían permitir pasar una cadena aquí en vez de un objeto, donde el valor de la cadena es la etiqueta name del elemento creado. Ver Extending native HTML elements para más información sobre como usar este parámetro.
El nuevo elemento recibirá el atributo cuyo valor es la etiqueta name del elemento personalizado. Los elementos personalizados son una característica experimental solo disponible en algunos navegadores.

Retorna

El nuevo Element.

Ejemplo

Crea un nuevo <div> y lo inserta antes del elemento con ID "div1".

HTML

<!DOCTYPE html>
<html>
<head>
  <title>||Trabajando con elementos||</title>
</head>
<body>
  <div id="div1">El texto superior se ha creado dinámicamente.</div>
</body>
</html>

JavaScript

document.body.onload = addElement;

function addElement () { 
  // crea un nuevo div 
  // y añade contenido 
  var newDiv = document.createElement("div"); 
  var newContent = document.createTextNode("Hola!¿Qué tal?"); 
  newDiv.appendChild(newContent); //añade texto al div creado. 

  // añade el elemento creado y su contenido al DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

Especificaciones

Especificación Estado Comentario
DOM
The definition of 'Document.createElement' in that specification.
Living Standard  

Compatibilidad con navegadores

     
Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) (Yes)[1][2] (Yes) (Yes) (Yes)
options argument (Yes)[3] ? 50 (50)[4][5] ? ? ?
  
Característica Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

[1] Desde Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) createElement() no utiliza HTMLSpanElement interface cuando el argumento es "bgsounds", "multicol", o "image".  En cambio, HTMLUnknownElement se utiliza para "bgsound" y "multicol" y HTMLElement HTMLElement se utiliza para "image".

[2] The Gecko implementation of createElement doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element. See bug 280692 for details.

[3] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For example: document.createElement("button", "custom-button") rather than document.createElement("button", {id: "custom-button"}). For the sake of backwards compatibility, Chrome accepts both forms.

[4] See [3] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50,  options must be an object.

[5] To experiment with custom elements in Firefox, you must set the dom.webcomponents.enabled and dom.webcomponents.customelements.enabled preferences to true.

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: malonson, AlejandroBlanco, daesnorey_xy, JoaquinGonzalez
 Última actualización por: malonson,