Le remplacement d'une balise html avec une autre balise utilisant JS DOM

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

Question

Je suis assez nouveau à javascript et DOM et je suis un problème avec la manipulation DOM en utilisant javascript pour le code html suivant. 

<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>

Désolé si le code html ci-dessus est bad.I suis écriture d'un script Greasemonkey pour la même qui est produit par un site que j'ai simplifié ici. J'ai donc aucun contrôle sur ce que ce soit.         Je veux la balise [tente] pour être remplacé par le [div] balise de sorte qu'il devient statique et je n'ai pas à attendre indéfiniment le lien 100e sous le chapiteau à venir. ;-). Donc, je l'ai écrit le script suivant. (Je suis nouveau à la programmation js et oui je sais que mon script suce :-)) 

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

De nombreux problèmes se sont produits. La sortie résultante n'a pas montré peu de liens sur elle. Peacock, Crow, Swan, Raven ne sont pas visibles dans la sortie et toutes les balises sont
foiré après il devient statique avec des espaces imprimés au-dessus et sans rupture entre les liens. En tant que programmeur débutant javascript je suis coincé ici et toute assistance dans la bonne direction serait très apprécié. De toute façon de résoudre ce problème avec élégance? Merci.

paul Bullard.

PS: J'utilise Fx 3.0.11

.
Était-ce utile?

La solution

Avez-vous envisagé d'utiliser innerHTML? 

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

Pas le plus efficace, mais simple.

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

Autres conseils

En ce qui concerne la raison pour laquelle votre document résultant a fini par manquer quelques nœuds, je peux vous dire pourquoi:

Lorsque vous appendChild à un autre nœud, le DOM supprime de là où il était. Alors, quand vous passez par le premier nœud, il est le retrait des enfants en même temps qu'il avance i sur le DOM. Supposons que A, B, C, etc. sont des nœuds enfants, et c'est ce qui se passe au début de la boucle: 

    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

Vous pouvez résoudre ce problème dans l'une des deux façons. Tout d'abord, vous pouvez faire ce changement: 

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

donc vous manipulez toujours un nœud cloné et le <marquee> d'origine ne dispose pas d'éléments supprimés, ou vous pouvez faire ce changement: 

fixedElement.appendChild(marqueeElement.firstChild);

de sorte que vous prenez toujours le premier élément de la <marquee> et ne perdez pas d'éléments de cette façon.

Non affilié à StackOverflow
scroll top