From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/document/createelement/index.html | 180 +++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 files/es/web/api/document/createelement/index.html (limited to 'files/es/web/api/document/createelement/index.html') diff --git a/files/es/web/api/document/createelement/index.html b/files/es/web/api/document/createelement/index.html new file mode 100644 index 0000000000..cb7b3d175b --- /dev/null +++ b/files/es/web/api/document/createelement/index.html @@ -0,0 +1,180 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Documento + - Referencia + - metodo +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

En un documento HTML, el método Document.createElement() crea un elemento HTML especificado por su tagName, o un  {{domxref("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 {{domxref("Node.nodeName", "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").

+ +
+
options{{optional_inline}}
+
Un objeto opcional ElementCreationOptions que contiene una única propiedad llamada 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);
+}
+ +

{{EmbedLiveSample("Example", 500, 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1][2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Parámetro options{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatGeckoDesktop(50)}}[4][5]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Desde Gecko 22.0 {{geckoRelease("22.0")}} createElement() no utiliza {{domxref("HTMLSpanElement")}} interface cuando el argumento es "bgsounds", "multicol", o "image".  En cambio, HTMLUnknownElement se utiliza para "bgsound" y "multicol" y {{domxref("HTMLElement")}} HTMLElement se utiliza para "image".

+ +

[2] La implementación en Gecko de createElement no cumple la especificación DOM para documentos XUL y XHTML: localName y namespaceURI no son inicializados como null en el elemento creado. Consúltese el {{ Bug(280692) }} para más información.

+ +

[3] En versiones anteriores de la especificación, este argumento era solamente una cadena cuyo valor era la etiqueta name del elemento personalizado. Por ejemplo: Podia recibir document.createElement("button", "mi-boton") en lugar de document.createElement("button", {id: "mi-boton"}). Por razones de compatibilidad, Chrome acepta ambas formas.

+ +

[4] Consultar [3] arriba: como Chrome, Firefox acepta una cadena en vez de un objeto en esta posición, pero solamente desde la versión 51 en adelante. En la versión 50, options debe ser un objeto.

+ +

[5] Para experimentar con elementos personalizados en Firefox, deben establecerse las preferencias dom.webcomponents.enabled y dom.webcomponents.customelements.enabled a true.

+ +

Notas de CSS Quantum

+ + + +

Ver también

+ + -- cgit v1.2.3-54-g00ecf