1. Zuhause
  2. Frage und Antwort
  3. Ersetze ein HTML-Tag mit einem anderen Tag mit JS DOM

Ersetze ein HTML-Tag mit einem anderen Tag mit JS DOM

2009-07-25 8 views
3

Ich bin ziemlich neu in Javascript und DOM und ich habe ein Problem mit der Manipulation von DOM mit Javascript für den folgenden HTML-Code.Ersetze ein HTML-Tag mit einem anderen Tag mit JS DOM

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

Sorry, wenn das obige HTML-Code ist bad.I ein Greasemonkey-Skript für die gleiche schreibe, die von einem Ort produziert wird, die ich hier vereinfacht. Also habe ich keine Kontrolle darüber. Ich möchte, dass das [Marquee] -Tag durch das [div] -Tag ersetzt wird, so dass es statisch wird und ich nicht ewig warten muss, bis der 100. Link im Marquee erscheint. ;-). Also habe ich folgendes Skript geschrieben. (Ich bin neu in js Programmierung und ja, ich weiß, dass mein Skript saugt :-))

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 aufgetreten. Die resultierende Ausgabe zeigte nicht wenige Links darauf. Peacock, Crow, Swan, Raven sind nicht in der Ausgabe zu sehen und alle
Tags sind durcheinander, nachdem es statisch wird mit Leerzeichen oben gedruckt und keine Brüche zwischen den Links. Als Anfänger Javascript Programmierer bin ich hier fest und jede Hilfe in die richtige Richtung würde sehr geschätzt werden. Irgendeine Möglichkeit, dieses Problem elegant zu lösen? Vielen Dank.

Paul Bullard.

PS: Ich verwende Fx 3.0.11.

Quelle

2009-07-25 Anonymous

+0

ist kein Standard-HTML-Tag. Es ist nur in IE und teilweise in Firefox verfügbar. – jao

Antwort

3

Haben Sie in Erwägung gezogen, 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 die effizienteste, aber geradlinig.

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

Quelle

2009-07-25 16:17:53 thedz

+0

Du bist ein Genie. Ich frage mich, wie ich daran nicht gedacht habe. : -? Vielen Dank. –

0

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

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 glaube, das ist eigentlich schon in dieser Datei als Vorlage enthielt, auch :)

Quelle

2009-07-25 17:17:58

6

Was den Grund, dass Ihr resultierendes Dokument am Ende ein paar Knoten fehlt, kann ich Ihnen sagen, warum:

Wenn Sie appendChild an einen anderen Knoten senden, entfernt das DOM es von wo auch immer es war. Wenn Sie also den ersten Knoten durchlaufen, werden gleichzeitig die untergeordneten Elemente entfernt, während i das DOM nach unten verschoben wird. Es sei angenommen, dass A, B, C usw. sind untergeordnete Knoten, und das ist, was am Anfang der Schleife passiert:

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 diese in einem von zwei Arten beheben kann. Erstens könnten Sie diese Änderung vornehmen:

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

, so dass Sie immer einen geklonten Knoten zu manipulieren, und die ursprüngliche <marquee> hat keine Elemente entfernt, oder Sie können diese Änderung vornehmen:

fixedElement.appendChild(marqueeElement.firstChild);

so dass Sie immer das erste Element in der <marquee> nehmen und Elemente auf diese Weise nicht verlieren.

Quelle

2009-07-25 17:26:54

 Verwandte Themen

  • Keine verwandten Themen^_^