Sustitución de una etiqueta HTML con otra etiqueta usando JS DOM

StackOverflow https://stackoverflow.com/questions/1182387

Pregunta

Soy bastante nuevo en Javascript y DOM y estoy teniendo un problema con la manipulación de DOM usando javascript para el siguiente código html. 

<html>
<head>
    <title>Testing</title>

</head>
<body>
<marquee direction=up height=400 scrollAmount=3.7 scrollDelay=70  onmousedown="this.stop()" onmouseover="this.stop()" onmousemove="this.stop()" onmouseout="this.start()">
        <a href="#"> <span>Lion</span></a><br><br>  
        <a href="#"> <span>Tiger</span></a><br><br>
        <a href="#"> <span>Giraffe</span></a><br><br>         
        <a href="#"> <span>Dinosaur</span></a><br><br>           
        <a href="#"> <span>Cat</span></a><br><br>                   
        <a href="#"> <span>Dog</span></a><br><br>           
        <a href="#"> <span>Llama</span></a><br><br>
        <a href="#"> <span>Rat</span></a><br><br>
        <a href="#"> <span>Rhino</span></a><br><br>
        <a href="#"> <span>Reindeer</span></a><br><br>
        <a href="#"  ><span >buffalo</span></a><br><br>

<a href="#"  ><span >Yak</span></a><br><br>

<a href="#"  ><span >Deer</span></a><br><br>


<a href="#"  ><span >moose</span></a><br><br>



<a href="#"  ><span >Rabbit</span></a> <br><br>

<a href="#"  ><span >Duck</span></a> <br><br>



<a href="#"  ><span >Peacock</span></a><br><br>

<a href="#"  ><span >Crow</span></a><br><br>

<a href="#"  ><span >Raven</span></a><br><br>

<a href="#"  ><span >Swan</span></a><br><br>
</marquee>     
<input type="button" value="Set Me Fixed" onclick="setMeFixed();" />
</body>
</html>

Lo siento si el código HTML anterior es bad.I escribo un script de Greasemonkey para el mismo que es producida por un sitio que he simplificado aquí. Así que no tengo ningún control sobre él en absoluto.         Quiero que la etiqueta [marquesina] que se reemplazará por la [div] etiqueta para que sea estático y que no tengo que esperar para siempre para el enlace número 100 en la marquesina de llegar. ;-). Así que escribí el siguiente script. (Soy nuevo en la programación JS y sí sé que mi guión chupa :-)) 

function setMeFixed(){
    var fixedElement=document.createElement('div');
    var marqueeElement=document.getElementsByTagName('marquee')[0];
    //var clonedMarqNodes=marqueeElement.cloneNode(true);

    for(i=0;i<marqueeElement.childNodes.length;i++){
        fixedElement.appendChild(marqueeElement.childNodes[i]);
    }
    marqueeElement.parentNode.replaceChild(fixedElement,marqueeElement);
}

Muchos problemas se produjeron. La salida resultante no mostró pocos enlaces en él. Pavo real, cuervo, Swan, Raven no se ven en la salida y todas las etiquetas
están en mal estado después de que se convierte en estática con espacios impresos por encima y no hay pausas entre los enlaces. Como un principiante Javascript programador estoy atascado aquí y cualquier tipo de asistencia en la dirección correcta sería muy apreciada. Cualquier forma de resolver este problema con elegancia? Gracias.

Paul Bullard.

PS: Estoy utilizando Fx 3.0.11

.
¿Fue útil?

Solución

Ha considerado el uso innerHtml? 

 var marq = document.getElementsByTagName('marquee')[0];
 var div = document.createElement('div');
 div.innerHTML = marq.innerHTML;
 marq.parentNode.appendChild(div);
 marq.parentNode.removeChild(marq);

No es el más eficiente, pero sencilla.

Ver: http://jquery.nodnod.net/cases/586

Otros consejos

En cuanto a la razón de que el documento resultante terminó faltan algunos nodos, lo que puedo decir por qué:

Cuando appendChild a otro nodo, el DOM quita de donde quiera que solía ser. Así que cuando usted pasa por el primer nodo, que es retirar a los niños al mismo tiempo, a medida que avanza hacia abajo i el DOM. Supongamos que A, B, C, etc., son nodos secundarios, y esto es lo que ocurre en el inicio de su bucle: 

    i=0  ↓
MARQUEE: A B C D E F
    DIV:

    i=1    ↓
MARQUEE: B C D E F
    DIV: A

    i=2      ↓
MARQUEE: B D E F
    DIV: A C

    i=3        ↓
MARQUEE: B D F (accessing this gives you an exception!)
    DIV: A C E

Puedes solucionar este problema en una de dos maneras. En primer lugar, usted podría hacer este cambio: 

fixedElement.appendChild(marqueeElement.childNodes[i]);
// becomes
fixedElement.appendChild(marqueeElement.childNodes[i].cloneNode());

por lo que siempre está manipulando un nodo clonado, y el <marquee> original no tener elementos eliminados, o se puede hacer este cambio: 

fixedElement.appendChild(marqueeElement.firstChild);

para que siempre toma el primer elemento de la <marquee> y no perder los elementos de esa manera.

Si su objetivo es deshacerse de <marquee>s en todos los sitios web, tal vez la mejor manera de hacerlo es simplemente editar el archivo userContent.css para incluir lo siguiente: 

marquee {
  -moz-binding: none; display: block; height: auto !important;
  /* This is better than just display:none !important;
   * because you can still see the text in the marquee,
   * but without scrolling.
   */
}

(creo que en realidad ya incluidos en dicho archivo como una plantilla, aunque:)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top