En el documento HTML, document.createElement() es un método utilizado para crear el elemento HTML. Se crea el elemento especificado mediante elementName o se crea un elemento HTML desconocido si no se reconoce el elementName especificado.
Sintaxis
var element = document.createElement("elementName");
En la sintaxis anterior, elementName se pasa como parámetro. elementName especifica el tipo del elemento creado. El nombre de Node del elemento creado se inicializa con el valor de nombre de elemento. El document.createElement() devuelve el elemento recién creado.
Ejemplo 1: Este ejemplo ilustra cómo crear un elemento <p>. Aporte :
html
<!DOCTYPE html>
<html>
<head>
<script>
function createparagraph() {
var x = document.createElement("p");
var t =
document.createTextNode("Paragraph is created.");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</head>
<body>
<button onclick="createparagraph()">CreateParagraph</button>
</body>
</html>
Producción:
Inicialmente:
Después de presionar el botón Crear párrafo:
Explicación:
- Comience con la creación de un elemento <p> usando document.createElement().
- Cree un Node de texto usando document.createTextNode().
- Ahora, agregue el texto a <p> usando appendChild().
- Agregue <p> a <body> usando appendChild().
Ejemplo 2: Este ejemplo ilustra cómo crear un elemento <p> y agregarlo a un elemento <div>. Aporte :
html
<!DOCTYPE html>
<html>
<head>
<script>
function createparagraph() {
var x = document.createElement("p");
var t =
document.createTextNode("Paragraph is created.");
x.appendChild(t);
document.getElementById("divid").appendChild(x);
}
</script>
</head>
<body>
<div id="divid"> A div element</div>
<button onclick="createparagraph()">CreateParagraph</button>
</body>
</html>
Producción:
Inicialmente:
Después de presionar el botón CreateParagraph:
Navegador compatible: los navegadores compatibles con el método DOM createElement() se enumeran a continuación:
- Google cromo 1
- Borde12
- explorador de Internet 5
- Firefox 1
- Ópera 6
- Safari 1
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA