Conceptos de DHTML

Esta propiedad crea automáticamente todos los elementos HTML y nodos de texto que le indicamos cuando le asignamos el valor. Es una de las formas más utilizadas para efectuar el cambio masivo de nodos de elementos y datos.

Para entender su funcionamiento implementemos una página que solicite el ingreso de dos URL y nos las muestre seguidamente al presionar un botón. Lo resolveremos utilizando las dos metodologías, es decir con y sin la propiedad innerHTML.

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <p>Ingrese url:<input type="text" id="text1" value="https://www.lavoz.com.ar" size="30"></p>
    <p> Ingrese url:<input type="text" id="text2" value="https://www.lanacion.com.ar" size="30"></p>
    <input type="button" value="Crear enlaces" id="boton1" onclick="crearEnlaces()">
    <h2>Mediante innerHTML</h2>
    <div id="enlaces1">
    </div>
    <h2>Creando nodos de elemento y texto</h2>
    <div id="enlaces2">
    </div>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function crearEnlaces() {
    //Utilizando el innerHTML
    let ob1 = document.getElementById("enlaces1")
    ob1.innerHTML = `<a href="${document.getElementById('text1').value}">Enlace 1</a>
                     <br><a href="${document.getElementById('text2').value}">Enlace 2</a>`

    //Utilizando los métodos para crear nodos de elemento y texto
    let elemento = document.createElement('a')
    let puntero = document.getElementById('enlaces2')
    puntero.appendChild(elemento)
    let nodotexto = document.createTextNode('Enlace 1')
    elemento.appendChild(nodotexto)
    elemento.setAttribute('href', document.getElementById('text1').value)
    puntero.appendChild(document.createElement('br'))
    elemento = document.createElement('a')
    puntero.appendChild(elemento)
    nodotexto = document.createTextNode('Enlace 2')
    elemento.appendChild(nodotexto)
    elemento.setAttribute('href', document.getElementById('text2').value)
}

Como podemos ver nos reduce mucho el código de nuestra aplicación en los casos que hay que crear varios nodos de tipo elemento y de tipo texto:

    ob1.innerHTML = `<a href="${document.getElementById('text1').value}">Enlace 1</a>
                     <br><a href="${document.getElementById('text2').value}">Enlace 2</a>`

La propiedad innerHTML se encarga de analizar todas las etiquetas HTML que contiene nuestro string y procede a crear tanto los nodos de tipo elemento (en este caso las dos 'a' y 'br')

Utilizamos las plantillas de cadenas para definir un solo string y sustituir los valores para los atributos href que ingresamos en los controles input de nuestro formulario.

Luego la misma actividad pero utilizando los métodos vistos anteriormente para crear nodos de texto y elemento:

    let elemento = document.createElement('a')
    let puntero = document.getElementById('enlaces2')
    puntero.appendChild(elemento)
    let nodotexto = document.createTextNode('Enlace 1')
    elemento.appendChild(nodotexto)
    elemento.setAttribute('href', document.getElementById('text1').value)
    puntero.appendChild(document.createElement('br'))
    elemento = document.createElement('a')
    puntero.appendChild(elemento)
    nodotexto = document.createTextNode('Enlace 2')
    elemento.appendChild(nodotexto)
    elemento.setAttribute('href', document.getElementById('text2').value)

Podemos ver que el proceso es mucho más engorroso y largo.

21 - Propiedad innerHTML

Retornar