Move a node of type element

What you have to use is firstElementChild :

function cambiarPosicion() {
  var lista1 = document.getElementById('lista');
  var hijo = lista1.firstElementChild;
  var lista2 = document.getElementById('lista2');
  lista2.appendChild(hijo);
}

  <ul id="lista">
    <li>
      Primero
    </li>
    <li>
      Segundo
    </li>
    <li>
      Tercero
    </li>
  </ul>
  <input type="button" value="Cambiar posicion" onClick="cambiarPosicion()">
  <ul id="lista2">
  </ul>

The problem with firstChild is that it also considers spaces in white, look at the property "data" when you make a console.log(hijo) :

function cambiarPosicion() {
  var lista1 = document.getElementById('lista');
  var hijo = lista1.firstChild;
  console.log(hijo);
  var lista2 = document.getElementById('lista2');
  lista2.appendChild(hijo);
}

  <ul id="lista">
    <li>
      Primero
    </li>
    <li>
      Segundo
    </li>
    <li>
      Tercero
    </li>
  </ul>
  <input type="button" value="Cambiar posicion" onClick="cambiarPosicion()">
  <ul id="lista2">
  </ul>

Did you see it? It's a line break:

"data": "\n    ",

This happens because the white space is also considered as a node of the element. To work with firstChild you should have all the <ul></ul> in the same line:

function cambiarPosicion() {
  var lista1 = document.getElementById('lista');
  var hijo = lista1.firstChild;
  var lista2 = document.getElementById('lista2');
  lista2.appendChild(hijo);
}

  <ul id="lista"><li>Primero</li><li>Segundo</li><li>Tercero</li></ul>
  <input type="button" value="Cambiar posicion" onClick="cambiarPosicion()">
  <ul id="lista2">
  </ul>

Instead of using the firstChild property like this:

lista1.firstChild

Use this other:

lista1.firstElementChild

In your HTML, the blanks you leave to format your HTML view are considered text nodes. So when you do lista1.firstChild , it is returning the nodes that are spaces, enter, tabulations, etc.

Therefore, the first click you do, removes a text node that contains the character of the enter key and other spaces, and adds them to the list2 node. The second click finds the li node within list and adds it to list2 . The third click of new text node ( spaces ), and so on ...

To verify that, you can leave firstChild as is and change your HTML so that it does not have spaces:

<ul id="lista"><li>Primero</li><li>Segundo</li><li>Tercero</li></ul>
<input type="button" value="Cambiar posicion" onClick="cambiarPosicion()">
<ul id="lista2">
</ul>

Anyway, this is horrible for everyone, but it serves to check. This is documented in English here