同時定位無序列表和無序列表中的項目

Question

我在演示中將ul元素和箭頭放在一起時遇到問題。 我無法在<ul>之間放置<div id="ytplayer_div2"></div>標簽，因為ID為ytplayer_div2的元素來自演示頁面源代碼下方的javascript端。 即使我被放這些，我也找不到任何解決方案。
<div id="ytplayer_div2"></div>標記中的內容來自哪里：

      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 );
    }
  }

簡而言之，該演示如何使我像這張照片一樣 ？

Answer 1

給<ul>一個id ，例如<ul id="mylist"> ，然后在函數開始時獲取它的所有<li>直接子對象，

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

在函數的末尾，而不是附加到ytplayer_div2 ，請執行

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

根據您的樣式，箭頭將顯示在右側（ float: left; <li>的其他元素上），但是現在位於DOM樹的正確部分。