ansaurus

Question

Replacing a html tag with another tag using JS DOM

Answer 1

A:

<marquee> is not a standard HTML tag. It's only available in IE and partly in Firefox.

jao 2009-07-25 16:16:51

How exactly does that help with his question?

thedz 2009-07-25 16:20:15

Yeah, this is a worthless answer.

Josh Stodola 2009-07-25 16:59:34

But he is right *gg*

Hippo 2009-07-25 20:06:15

and marquee is ugly :-)

jao 2009-07-26 08:50:36

Answer 2

+1 A:

Have you considered using innerHTML?

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

Not the most efficient, but straight-forward.

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

thedz 2009-07-25 16:17:53

Dude you are a genius. I wonder how i didn't think of that. :-?Thanks a ton.

2009-07-25 16:25:31

Answer 3

A:

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

Paul Fisher 2009-07-25 17:17:58

Answer 4

+2 A:

As for the reason that your resultant document ended up missing a few nodes, I can tell you why:

When you appendChild to another node, the DOM removes it from wherever it used to be. So when you go through the first node, it's removing children at the same time as it advances i down the DOM. Assume that A, B, C, etc. are child nodes, and this is what happens at the start of your loop:

    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

You can fix this in one of two ways. Firstly, you could make this change:

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

so you're always manipulating a cloned node, and the original <marquee> doesn't have elements removed, or you can make this change:

fixedElement.appendChild(marqueeElement.firstChild);

so that you always take the first item in the <marquee> and don't lose elements that way.

Paul Fisher 2009-07-25 17:26:54

ansaurus

tags:

views:

answers:

Replacing a html tag with another tag using JS DOM

related questions