Ejemplo
Crear un <button> elemento:
var btn = document.createElement("BUTTON");
El resultado será:
Inténtalo tú mismo " elementos HTML menudo contiene texto. Para crear un botón con el texto también debe crear un nodo de texto que se anexa a la <button> elemento:
Ejemplo
Crear un botón con el texto:
var btn = document.createElement("BUTTON");
// Create a <button> element
var t = document.createTextNode("CLICK ME");
// Create a text node
btn.appendChild(t);
// Append the text to <button>
document.body.appendChild(btn);
// Append <button> to <body>El resultado será:
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El createElement() método crea un nodo elemento con el nombre especificado.
Consejo: Utilice la createTextNode() método para crear un nodo de texto.
Consejo: Una vez creado el elemento, utilice el elemento. appendChild() o elemento. insertBefore() método para insertarlo en el documento.
Soporte del navegador
| Método | |||||
|---|---|---|---|---|---|
| createElement() | Sí | Sí | Sí | Sí | Sí |
Sintaxis
document.createElement( nodename )Los valores de los parámetros
| Parámetro | Tipo | Descripción |
|---|---|---|
| nodename | String | Necesario. El nombre del elemento que desea crear |
Detalles técnicos
| Valor de retorno: | Un objeto Element, que representa el nodo de elemento creado |
|---|---|
| DOM Versión: | Nivel básico Objeto Documento 1 |
Más ejemplos
Ejemplo
Crear un <p> elemento con algún texto, y añadirlo al documento:
var para = document.createElement("P");
// Create a <p> element
var t =
document.createTextNode("This is a paragraph");
// Create a text node
para.appendChild(t);
// Append the text to <p>
document.body.appendChild(para);
// Append <p> to <body> Inténtalo tú mismo " Ejemplo
Crear un <p> elemento y añadirlo a un <div> elemento:
var para = document.createElement("P");
// Create a <p> element
var t =
document.createTextNode("This is a paragraph.");
// Create a text node
para.appendChild(t);
// Append the text to <p>
document.getElementById("myDIV").appendChild(para);
// Append <p> to <div> with id="myDIV" Inténtalo tú mismo "