51 - Propiedad innerHTML


Esta propiedad crea automáticamente todos los elementos HTML y nodos de texto que le indicamos cuando le asignamos el valor.

Para entener 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>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
Ingrese url:<input type="text" id="text1" value="http://www.lavoz.com.ar" size="30"><br>
Ingrese url:<input type="text" id="text2" value="http://www.lanacion.com.ar" size="30"><br>
<input type="button" value="Crear enlaces" id="boton1">
<h2>Mediante innerHTML</h2>
<div id="enlaces1">
</div>
<h2>Creando nodos de elemento y texto</h2>
<div id="enlaces2">
</div>
</body>
</html>

funciones.js

window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob1=document.getElementById('boton1');
  ob1.addEventListener('click',crearEnlaces,false);
}

function crearEnlaces(e)
{
  //Utilizando el innerHTML
  var 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
  var elemento=document.createElement('a');
  var puntero=document.getElementById('enlaces2');
  puntero.appendChild(elemento);
  var 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:

  var 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>';

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

  var elemento=document.createElement('a');
  var puntero=document.getElementById('enlaces2');
  puntero.appendChild(elemento);
  var 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);

Retornar