Замена HTML -тег на другой тег с помощью JS DOM

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

Вопрос

Я довольно новичок в JavaScript и DOM, и у меня проблема с манипулированием DOM с использованием JavaScript для следующего 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>

Извините, если приведенный выше HTML -код плохой. Я пишу сценарий GreasemonKey для того же, который создается сайтом, который я упростил здесь. Так что я не контролирую это вообще. Я хочу, чтобы тег [Marquee] был заменен на тег [Div], чтобы он стал статичным, и мне не нужно вечно ждать 100 -й ссылки в шаре. ;-). Поэтому я написал следующий сценарий. (Я новичок в программировании JS, и да, я знаю, что мой сценарий отстой :-)) 

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

Произошло много проблем. Полученный результат не показал несколько ссылок. Павлин, ворона, лебедь, ворон не видны в выходе и во всех
Теги испорчены после того, как становятся статичными с напечатанными выше пространствами, и без разрывов между ссылками. Как начинающий программист JavaScript, я застрял здесь, и любая помощь в правильном направлении будет очень оценена. Любой способ элегантно решить эту проблему? Спасибо.

Пол Буллард.

PS: я использую FX 3.0.11.

Это было полезно?

Решение

Вы думали об использовании innerhtml?

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

Не самый эффективный, но прямой.

Видеть: http://jquery.nodnod.net/cases/586

Другие советы

Что касается причины того, что в вашем результате документа не хватало нескольких узлов, я могу сказать вам, почему:

Когда ты appendChild В другой узел DOM удаляет его откуда, где бы он ни был. Поэтому, когда вы проходите через первый узел, он удаляет детей в то же время, что и продвижение i вниз по дому. Предположить, что A, B, C, и т. д. - это детские узлы, и это то, что происходит в начале вашей петли:

    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

Вы можете исправить это одним из двух способов. Во -первых, вы можете внести это изменение:

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

Итак, вы всегда манипулируете клонированным узлом и оригиналом <marquee> нет удаленных элементов, или вы можете внести это изменение:

fixedElement.appendChild(marqueeElement.firstChild);

так что вы всегда принимаете первый предмет в <marquee> И не теряйте элементы таким образом.

If your goal is to get rid of <marquee>s on all web sites, perhaps the best way to do so is to just edit your userContent.css file to include the following:

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

(I think that's actually already included in that file as a template, even :)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top