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.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
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);
}
</script>
</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>

Ver ejemplo anterior

El código javascript es:

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);

(adsbygoogle = window.adsbygoogle || []).push({});

Propiedad innerHTML