traer datos poniéndolos en elementos unos detrás de otros

[breaststroke]

Buenas.
Estoy intentando recoger datos con ajax e ir colocándolos dentro de un Div.
Ésta es la parte de la función para ello (se activa con un evento):

Código Javascript:

...
xmlhttp.onreadystatechange=function()
  {
//datos que recogo de un input con id=comment, con un evento
  var element = document.getElementById('comment').value;
   var container = document.getElementById('display');
 //éste es el elemento creado, un p, dentro del div anterior
  var new_element = document.createElement('p');
  new_element.innerHTML =element;
  container.appendChild(new_element, container.firstChild);
  }
...
 

La cuestión es que cuando recogo los datos de un elemento de la página, como en el caso de arriba, me funciona bien.
Pero si los datos los traigo de otra página, me aparecen, pero duplicados. Y el fallo sé que no está en la otra página, puesto que lo he probado con otras funciones (cuando no quiero que los datos aparezcan unos tras otros, sino que se sustituyan).

Es decir, si en lugar de:

Código Javascript:

var element = document.getElementById('comment').value;
 

tengo:

Código Javascript:

var element=xmlhttp.responseText;
...
xmlhttp.open("GET","otrapágina.php?,true);
xmlhttp.send();
...
 

entonces me aparece el problema, de que cada vez que aparecen datos nuevos, salen duplicacados.


¿Alguna idea de qué estoy haciendo mal?
Muchas gracias!

[autonotel]

container.appendChild(new_element, container.firstChild);

Creo que te estas armando un pequeño lio.

cada vez que recargas la página creas un nuevo elemento (p), debes cargar la página en un solo elemento, en un div.
en lugar de
var new_element = document.createElement('p');
new_element.innerHTML =element;
container.appendChild(new_element, container.firstChild);

algo así como

Código:

document.getElementById('display').innerHTML = element;



<body...>
<div id="display"...>

y los ('p') los pones en la página a la que llamas

[breaststroke]

Gracias autonotel.
No entiendo lo que me dices. Yo estoy cargando todo en un elemento div(Id=display), pero como quiero que cada vez que hago una llamada a la función lo nuevo se una a lo anterior, se crea un elemento 'p' para ello. Todos los 'p' creados están dentro del div (Id=display).
De hecho funciona, como he dicho, pero cuando el valor del elemento a llamar viene de otra página, me aparecen duplicados.

Gracias

[autonotel]

Claro pero si cada vez que llamas a la página creas un elemento te crea toda la lista desde el principio.

<p> hola</p>

<p>hola </p>
<p que tal</p>

<p>hola</p>
<p>que tal</p>
<p>estamos</p>

en lugar de
<p>hola</p>
<p>que tal</p>
<p>estamos</p>

supongo que es eso lo que te hace no?

[breaststroke]

no exactamente autonotel.
Esto es lo que hace:

<p>hola</p>
<p>hola</p>
<p>qué</p>
<p>qué</p>
<p>tal</p>
<p>tal</p>
<p>estamos</p>
<p>estamos</p>


En lugar de:

<p>hola</p>
<p>qué</p>
<p> tal</p>
<p>estamos</p>

Pero como digo, en el segundo caso. En el primero sale bien.

Gracias

[breaststroke]

hola de nuevo.
Puede que haya encontrado el fallo.
Porque me parece que la función onreadystatechange se llama así misma 4 veces?
entonces debe ser por eso que se repite. De hecho en Chrome, que es donde estaba trabajando, me ponía el texto dos veces, pero en IE me lo ponía 4..

He puesto todo fuera de dicha función, excepto la recogida de la respuesta en una variable, claro.

De momento me funciona, ya veremos..