如何使用jquery包围每个内容 <div> 用一个标签 <marquee> 标签

Question

I am curious about how I would go about writing a one-liner to take every div and surround its contents with marquee tags using jquery. For example I would like it to take

<div class="foo">Hello <div class="bar">World</div></div>

and turn it into

<div class="foo"><marquee>Hello <div class="bar"><marquee>World</marquee></div></marquee></div>

My original attempt that failed:

$("div").each(function() $(this).html("<marquee>"+$(this).html()+"</marquee>")});

It failed when it reached nested div tags because the outermost tag's contents was replaced when its marquee tag was added thus invalidating references to the inner tags. I'm not super worried about executing JavaScript again .

How would you do this?

Answer 1

Consider the recommendations from other users about not using deprecated elements, but for exemplification purposes, the following solution:

From the jQuery docs about .html() :

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

The references and even events of children are removed by jQuery (well, not removed, they are just being created as new elements again, so you don't keep the previous events and references).

Don't use .html() then, and instead create a new marquee element and append the children of the original div to it, then append that marquee to the div:

$("div").each(function(){
    var newMarquee = $('<marquee>');
    newMarquee.append($(this).children());
    $(this).append(newMarquee);
});