Document.createElement()
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 detagName
. No utilizar nombres reservados (como "html:a") con este método. Al ser invocado en un documento HTML,createElement()
conviertetagName
a minúsculas antes de crear el elemento. En Firefox, Opera, y Chrome,createElement(null)
funciona comocreateElement("null")
. options
Opcional-
Un objeto opcional
ElementCreationOptions
que contiene una única propiedad llamadais
, cuyo valor es el de la etiqueta name de un elemento personalizado definido previamente utilizandocustomElements.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
Specification |
---|
DOM Standard # ref-for-dom-document-createelement① |
Compatibilidad del Navegador
BCD tables only load in the browser