javascript - 同时定位无序列表和无序列表外的元素

Question

我在 demo 中定位 ul 元素和箭头时遇到问题一起。我不能放 <div id="ytplayer_div2"></div> <ul> 之间的标签因为 id 为 ytplayer_div2 的元素来自 demo page 下面的 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 );
    }
  }

简而言之，我怎么能把这个demo做成这样picture ？

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 树的正确部分。