Positioning Unordered List and Items out of Unordered List Simultaneously

Question

I have a problem about positioning ul elements and arrows in the demo together. I can't put <div id="ytplayer_div2"></div> tags between <ul> because of elements with id ytplayer_div2 coming from javascript side which below the demo page source. Even if i were put these i couldn't figure out any solution.
where are content inside <div id="ytplayer_div2"></div> tags coming from:

      function ytplayer_render_playlist( )
  {
    for ( var i = 0; i < ytplayer_playlist.length; i++ )
    {
      var img = document.createElement( "img" );
      img.src = "track_arrow.gif";
      var a = document.createElement( "a" );
      a.href = "#ytplayer";
      a.onclick = (
        function( j )
        {
          return function( )
          {
            ytplayer_playitem = j;
            ytplayer_playlazy( 0 );
          };
        }
      )( i );
      a.appendChild( img );
      document.getElementById( "ytplayer_div2" ).appendChild( a );
    }
  }

In short, how can i this demo make into like in this picture ?

Answer 1

Give the <ul> an id , eg <ul id="mylist"> , then at the beginning of your function get all of the <li> direct children of it,

var arrOfListNodes = Array.prototype.filter.call(document.getElementById('mylist').childNodes, function (e) {return e.tagName === 'LI';});

and at the end of your function instead of appending to ytplayer_div2 , do

arrOfListNodes[i].insertBefore(a, arrOfListNodes[i].firstChild);

The arrows will appear on the right due to your style ( float: left; on the other elements in the <li> s) but are in the correct part of the DOM Tree now.