CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Preston
Preston

Reputation: 2185

JQuery Append UL to another DIV

I have this DIV:

    <div id="video_container" class="barra">
        <ul>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/Gy3lrgVakII" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/AnwKqlhzCM4" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/wLJM0oi7o9A" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/NRWrYGaqIO8" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/ICUhpeXDrwQ" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/DDVWXbVxIkI" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/ntD69DBs8Q8" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/fuTmK5WHQ18" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/IpUwiyID_Kk" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/snISa71nM_k" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/z6VuNTPuChc" frameborder="0" allowfullscreen></iframe></li>
            <li><iframe width="450" height="253" src="//www.youtube.com/embed/NKzwcbidanM" frameborder="0" allowfullscreen></iframe></li>
        </ul>
    </div>
<div id="video_container_mobile"></div>

i want to populate another div with the same content (<ul>...</ul> )

I have this:

var list = $("#video_container_mobile").append('<ul></ul>').find('ul');
        $("#video_container ul li").each(function() {
            var el = $(this);
            list.append(el);
        });

This works, but this erasing from the original div, the list that i was appending.

See the image below:

THE IMAGE FROM FIREBUG

and see the FIddle:

http://jsfiddle.net/YgQJM/

I want to keep in the 2 DIV's the same content... Can anyone help?

Upvotes: 0

Views: 2591

Answers (2)

Brian Ray
Brian Ray

Reputation: 1492

Probably not as clean as @Hussein's, but

$('#video_container_mobile').append($('#video_container').html());

Upvotes: 1

Hussein Nazzal
Hussein Nazzal

Reputation: 2557

$('#video_container_mobile').append($('#video_container ul ').clone())

http://jsfiddle.net/edY45/

Upvotes: 4

Related Questions