Crear un nodo de tipo elemento createElement()

En un documento HTML, el método Document.createElement() crea un elemento HTML especificado

Método createElement ()

El método createElement () crea un nodo de elemento con el nombre especificado.
Consejo: una vez creado el elemento, utilice el método element .appendChild () o element .insertBefore () para insertarlo en el documento.

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").
  • options Opcional 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.
<!DOCTYPE html>
<html>
<body>
<p>Haga clic en el botón para hacer un elemento BOTON con texto..</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
  var btn = document.createElement("BOTON");
  btn.innerHTML = "NUEVO BOTON";
  document.body.appendChild(btn);
}
</script>
</body></html>

Para crear nodos de tipo elemento disponemos del método createElement que contiene el objeto document:

var elemento=document.createElement("Aca indicamos el nombre del elemento HTML a crear")

Para ver el funcionamiento confeccionemos un programa que cree un párrafo en forma dinámica y lo añada a un div.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
function agregar(){  var elemento=document.createElement('p'); 
  var texto=document.createTextNode('Hola Mundo');  elemento.appendChild(texto);
  var obj=document.getElementById('parrafos');  obj.appendChild(elemento);}</script>
</head><body><div id="parrafos"></div>
<input type="button" value="Agregar nodo tipo elemento" onClick="agregar()">
</body>
</html>