更换html标记使用JS DOM另一个标签

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

题

我是相当新的JavaScript和DOM和我有使用JavaScript为以下HTML代码操纵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>

很抱歉，如果上面的HTML代码bad.I正在写的Greasemonkey脚本其由我在这里简化的位点产生的相同。所以我有任何没有对其进行控制。         我希望[字幕]标签与[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下来DOM同时消除孩子。假设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>的第一个项目，不要失去元素的方式。

如果你的目标是让所有的网站摆脱<marquee>s的，也许是做的最好的方式，就是为了编辑你的 userContent.css 文件，以包括以下内容：

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

（我认为这实际上已经包含在该文件作为模板，即使：）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top