Sostituzione di un tag HTML con un altro tag utilizzando JS DOM

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

Domanda

Sono abbastanza nuovo a JavaScript e DOM e sto avendo un problema con la manipolazione DOM utilizzando JavaScript per il seguente codice 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>

Scusate se il codice html di cui sopra è bad.I sto scrivendo uno script Greasemonkey per lo stesso che è prodotta da un sito che ho semplificato qui. Quindi non ho alcun controllo su di esso di sorta.         Voglio che il tag [tendone] per essere sostituito con il [div] tag in modo che diventa statico e non devo aspettare per sempre per il collegamento 100 ° nel tendone a venire. ;-). Così ho scritto il seguente script. (Sono nuovo di programmazione js e sì, lo so che il mio script fa schifo :-)) 

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);
}

Molti problemi si è verificato. Il risultato finale non ha mostrato alcuni link su di esso. Pavone, Corvo, Cigno, Raven non si vedono in uscita e tutti i
tag sono in disordine dopo che diventa statico con spazi stampate sopra e senza pause tra i link. Come un principiante javascript programmatore io sono bloccato qui e qualsiasi tipo di assistenza nella giusta direzione sarebbe molto apprezzato. Qualsiasi modo per risolvere elegantemente questo problema? Grazie.

Paul Bullard.

PS: Sto usando Fx 3.0.11

.
È stato utile?

Soluzione

Hai pensato di usare innerHTML? 

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

Non il più efficiente, ma diretto.

Si veda: http://jquery.nodnod.net/cases/586

Altri suggerimenti

Per quanto riguarda il motivo che il documento risultante finito col perdere un paio di nodi, posso dirvi perché:

Quando si appendChild ad un altro nodo, il DOM rimozione dal ovunque ha usato per essere. Quindi, quando si passa attraverso il primo nodo, è la rimozione di bambini allo stesso tempo mentre avanza i lungo il DOM. Si supponga che A, B, C, ecc, sono nodi figlio, e questo è ciò che accade all'inizio del vostro ciclo: 

    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

È possibile risolvere questo in uno dei due modi. In primo luogo, si potrebbe fare questo cambiamento: 

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

in modo che stai sempre manipolando un nodo clonato, e il <marquee> originale non avere elementi rimossi, oppure si può effettuare questa modifica: 

fixedElement.appendChild(marqueeElement.firstChild);

in modo che si prende sempre il primo elemento nella <marquee> e non perdere gli elementi in quel modo.

Se il vostro obiettivo è quello di sbarazzarsi di <marquee>s su tutti i siti web, forse il modo migliore per farlo è quello di modificare solo il tuo file userContent.css per includere i seguenti: 

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.
   */
}

(credo che in realtà è già incluso in quel file come modello, anche:)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top