Problema con innerHTML

[TinchioAR]

Hola gente como estan? recien me acabo de registrar en el foro, siempre lo lei como anonimo y me parece excelente.
Les paso a detallar mi extraño problema, resulta que tengo una funcion en javascript para que me agregue dentro de una etiqueta div una fila de una tabla, con dos columnas dentro de ella.La funcion es extremadamente simple, no es mas que concatenar la cadena al contenido html de la etiqueta div en cuestion. El problema es que el resultado de esta funcion no termina siendo el deseado y por alguna razon empiezan a aparecer/desaparecer etiquetas (ahora con el codigo se entendera mejor), ademas por lo que estuve probando el problema aparentemente es solo cuando hay una tabla de por medio (table, tr, td, tbody, etc). La funcion en cuestion es agregarrelacionado().

Código HTML:

<div id=contenido>
    <h3>Agregar un nuevo perfil al sistema</h3>
    <h4>Complete todos los datos del perfil</h4>
    <form name="nuevoperfil" action="altaperfil.php" method="POST" enctype="multipart/form-data">
        <table border="0">
        <tbody>
                <tr>
                    <td>Perfiles relacionados</td>
                    <td> <a href="javascript:agregarrelacionado()" >Agregar relacion</a><br>
                    <input type="text" name="buscar" value="" size="15" /></td>
                </tr>
               <div id="relaciones" ></div>
                <tr>
                    <td></td>
                    <td><input type="button" value="Guardar Perfil" name="btnguardar"  onclick="altaperfil()"/></td>
                </tr>
        </tbody>
        </table>

    </form>
    
</div> 

Código javascript:

function agregarrelacionado()
{
    var viejo=document.getElementById("relaciones").innerHTML;
    var nuevo = viejo + '<tr><td></td><td><input type="text" name="buscar" value="" size="15" /><a href="javascript:void(0)" onclick="eliminarrelacionado(this)">Eliminar relacion</a></td></tr>';
    document.getElementById("relaciones").innerHTML=nuevo;
  
}
 

La idea seria obtener, con cada click en la funcion, un resultado de este tipo

Código HTML:

<div id="relaciones" >
<tr>
<td></td>
<td><input type="text" name="buscar" value="" size="15" /><a href="javascript:void(0)" onclick="eliminarrelacionado(this)">Eliminar relacion</a></td>
</tr>
</div> 

Pero sin embargo, gracias a firebug, veo que el extraño resultado es algo asi (ademas de que visualmente los objetos son colocados en cualquier otro lugar que no es el esperado)

Código HTML:

<div id="relaciones">
<div/>
<tr>
<td/>
<td>
<input type="text" size="15" value="" name="buscar"/>
<a onclick="eliminarrelacionado(this)" href="javascript:void(0)">Eliminar relacion</a>
</td>
</tr>
</div> 

Espero que por favor me puedan ayudar ya que probe de todo pero no logro saber de donde viene la falla. Como nota, solo lo he podido probar en mi laptop esto, que seria Firefox 3 con GNU/Linux.
Muchas gracias.

PD: notese en el resultado la aparición de la extraña etiqueta <div/> y <td/>

[Panino5001]

No leí todo tu post, pero esta estructura html es incorrecta y seguro generará errores:

Código PHP:

  </tr>
               <div id="relaciones" ></div>
                <tr> 
   

Te sugiero que leas un manual de html.

[TinchioAR]

Hola, yo de nuevo, ya pude solucionar mi problema, como recien empiezo con javascript desconocia la funcion insertBefore, con la cual pude hacer lo que necesitaba sin complicaciones. Muchas gracias de todas maneras.