Nodi non creati via javascript non riconosciuti

[Mokuchan]

Salve a tutti,
cercando di realizzare una funzione javascript per scambiare i valori di due campi input successivi ho realizzato questa funzione

function upBiografia(campo){
var fratello= campo.parentNode.previousSibling;
if(null != fratello) {
var tmp= fratello.firstChild.value;
fratello.firstChild.value= campo.parentNode.firstChild.value;
campo.parentNode.firstChild.value= tmp;
}
}

che effettivamente funziona ma solo sugli elementi creati attraverso javascript con quest'altra funzione

function addBiografia(id){
campi = document.createElement('div');
document.getElementById(id).appendChild(campi);
campi.innerHTML="<input class=\"tappabiografica\" name=\"tappabiografica[]\" type=\"text\" value=\"\"><a class=\"biosu\" href=\"#\" title=\"Sposta su\" onclick=\"upBiografia(this); return false;\"></a><a class=\"biogiu\" href=\"#\" title=\"Sposta giù\"></a><a class=\"biodel\" href=\"#\" title=\"Elimina\"></a><div class=\"clear\">";
window.scrollBy(0,50);
}

mentre non mi riconosce il campo iniziale che io ho inserito a mano

<div>
<input class="tappabiografica" name="tappabiografica[]" value="" type="text"><div class="clear"></div>
</div>

Posso ovviamente realizzare la funzione in altri modi, tuttavia mi sembra strano che non vengano riconosciuti quei nodi non creati via javascript. L'errore che mi dà la console è:
Errore: fratello.firstChild is null

[artorius]

mmm devi considerare che se hai questo HTML:

<div id="MyID">
   <p class="MyParagraph">
   </p>
   <input type="button" onclick="alert(this.previousSibling.className)" />
</div>

Al click sul bottone non è affatto detto che di faccia l'alert con "MyParagraph" anzi, sicuramente non te lo fa, questo perché tra i due ci sono degli spazi, tab, testo, che le specifiche DOM indicano come TextNode.

a tutti gli effetti la struttura che vedi è composta da

[ElementNode tagName="div" id="MyID"]
[TextNode value="   "][ElementNode tagName="p class="MyParagraph"]
[TextNode value="   "][/p]
[TextNode value="   "][ElementNode tagName="input type="button" onclick="alert(this.previousSibling.className)" /]
[/div]

Quindi per ottenere il paragraph dall'input devi fare input.previousSibling.previousSibling, comunque questo non è il metodo più sicuro, il modo migliore è:

//Ottiene l'elemento HTML precedente
function getPrevous(elem){
   for(var c = elem.previousSibling; c != null; c = c.previousSibling){
      if(c.nodeType == 1){ //nodeType == 1 >> ElementNode
         return c;
      }
   }
   return null;
}
//Ottiene l'Elemento HTML successivo
function getNext(elem){
   for(var c = elem.nextSibling; c != null; c = c.nextSibling){
      if(c.nodeType == 1){ //nodeType == 1 >> ElementNode
         return c;
      }
   }
   return null;
}

Con queste funzioni sei sicuro di ottenere o l'elemento inderessato o null.

[Mokuchan]

Grazie mille per la veloce risposta, sei stato di grande aiuto!!
Avevo già sentito parlare di questo problema dei nodi di testo, tuttavia non capisco perchè dovrebbe trovarmene anche se io, come avevo provato a fare, scrivo tutto senza lasciare alcuno spazio.
Comunque provo con il tuo metodo e vedo subito se funziona.

Edit: funziona perfettamente!! Grazie mille!