Ersetzen eines HTML -Tags durch ein anderes Tag mit JS DOM

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

Frage

Ich bin ziemlich neu in JavaScript und DOM und habe ein Problem mit der Manipulation von DOM mit JavaScript für den folgenden HTML -Code. 

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

Tut mir leid, wenn der obige HTML -Code schlecht ist. Ich schreibe ein Greasemonkey -Skript für dasselbe, das von einer Site produziert wird, die ich hier vereinfacht habe. Ich habe also überhaupt keine Kontrolle darüber. Ich möchte, dass das [Marquee] -Tag durch das [Div] -Tag ersetzt wird, damit es statisch wird und ich nicht ewig auf den 100. Link im Festzelt warten muss, um zu kommen. ;-). Also habe ich das folgende Skript geschrieben. (Ich bin neu bei JS-Programmierung und ja, ich weiß, dass mein Drehbuch scheiße ist :-)) 

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

Viele Probleme traten auf. Die resultierende Ausgabe zeigte nicht nur wenige Links darauf. Pfauen, Krähe, Schwan, Raven sind in der Ausgabe und all der nicht zu sehen
Tags sind durcheinander, nachdem es mit oben gedruckten Räumen statisch wird und keine Pausen zwischen den Links. Als Anfänger -JavaScript -Programmierer stecke ich hier fest und jede Unterstützung in die richtige Richtung wäre sehr geschätzt. Eine Möglichkeit, dieses Problem elegant zu lösen? Vielen Dank.

Paul Bullard.

PS: Ich verwende FX 3.0.11.

War es hilfreich?

Lösung

Haben Sie überlegt, Innerhtml zu verwenden?

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

Nicht das effizienteste, aber einfachste.

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

Andere Tipps

Aus diesem Grund kann ich Ihnen sagen, warum Ihr resultierendes Dokument ein paar Knoten fehlte, warum:

Wenn du appendChild Zu einem anderen Knoten entfernt das DOM es von wo immer es früher war. Wenn Sie also den ersten Knoten durchgehen, wird Kinder gleichzeitig entfernt, während er voranschreitet i DOM DOM. Annehmen, dass A, B, C, usw. sind Kinderknoten, und das passiert zu Beginn Ihrer Schleife:

    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

Sie können dies auf zwei Arten beheben. Erstens könnten Sie diese Änderung vornehmen:

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

Sie manipulieren also immer einen geklonten Knoten und das Original <marquee> Es hat keine Elemente entfernt, oder Sie können diese Änderung vornehmen:

fixedElement.appendChild(marqueeElement.firstChild);

so dass Sie immer den ersten Artikel in der <marquee> Und verlieren Sie auf diese Weise keine Elemente.

Wenn Ihr Ziel ist, loszuwerden <marquee>s auf allen Websites, vielleicht ist der beste Weg, dies zu tun userContent.css Datei, um Folgendes einzuschließen:

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

(Ich denke, das ist sogar in dieser Datei als Vorlage bereits enthalten :)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top