0

我在演示中将 ul 元素和箭头放在一起时遇到问题。我不能在它们<div id="ytplayer_div2"></div>之间放置标签，<ul>因为带有 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 );
    }
  }

简而言之，我怎样才能把这个演示变成这张照片中的样子？

4

1 回答 1

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>s 中的其他元素上），箭头将出现在右侧，但现在位于 DOM 树的正确部分。

于 2012-12-06T02:22:14.640 回答