Question

我正在尝试在查询SP列表后使用JS生成元素。问题是我无法在循环中使div innerHTML显示更改。 HTML代码是这样的：

<div style="width: 100%;">
  <div class="FXmasonryWrapper" id="letterContainers">
    <div class="bioBarTitle" id="letterButtons"></div>
    <br>   
  </div>
</div>

为letterContainers和letterButtons生成项目的功能是：

<script type="text/javascript">
    var letters = new Array;
    var foundLetters = '';
    //QueryList( Repository, ListName, StartingRow, EndRow, SuccessCallback, FailCallback );
    QueryList( '/sites/SKCopspcs/testing/', 'QAVGlossary', 1, 1000, function( sender, args ){
      //Success -> queryItems
      var foundItems = queryItems.getEnumerator();
      var letterButtons = document.getElementById( 'letterButtons' );
      var letterContainers = document.getElementById( 'letterContainers' );
      var _all = "";
      var done = 0;
      while( foundItems.moveNext() )
      {
        var found = foundItems.get_current();
        var title = found.get_item( 'Title' ) + '';
        var definition = found.get_item( 'n5ud' ) + '';
        var letter = found.get_item( 'Category' ) ;

        if( !foundLetters.includes( letter ) )
        {
          foundLetters += letter + ', ';
          letters.push( letter );
          letterButtons.innerHTML += "<span class=\"bioTitle\" id=\"" + letter + "Span\" onclick=\"Show( this )\">" + letter + "</span>";
          letterContainers.innerHTML += "<div class=\"FXmasonry bio\" id=\"" + letter + "\"></div>";
        }

        document.getElementById( letter ).innerHTML += "" +
          "<div class=\"FXmasonryItem\">" +
              "<span class=\"titleB\">" + title + "</span>"  + "<br>" + definition +
          "</div>";

        _all += "" +
            "<div class=\"FXmasonryItem\">" +
                "<span class=\"titleB\">" + title + "</span>"  + "<br>" + definition +
            "</div>";
      }

      letterButtons.innerHTML += "<span class=\"bioTitle\" id=\"AllSpan\" onclick=\"Show( this )\">All</span>";
      letterContainers.innerHTML += "<div class=\"FXmasonry bio\" id=\"All\"></div>";
      document.getElementById( 'All' ).innerHTML = _all;
      console.log( letterButtons.innerHTML );

    }, function( s, a ){
      //Fail\"
      alert( 'Could not query list "QAVGlossary"' );
    });
</script>

letterContainers正确生成所有项目，但letterButtons仅显示第一个元素（带有字母“A”的按钮），当我记录innerHTML letterButtons时}，它包含所有跨度按钮！但只显示'A'，在DOM资源管理器中它只包含第一个元素（'A'按钮）！如果我在DOM资源管理器中从innerHTML复制粘贴生成的letterButtons（我在“生成”所有内容后登录控制台），它会显示所有内容！

为什么会这样？ letterButtons.innerHTML正确包含所有生成的项目，但它只显示一个，我无法弄清楚原因。我甚至用try catch包围了代码，在循环中创建了日志，并且有0个错误。一切都正确，除了letterButtons.innerHTML包含正确的值，但只显示第一个元素。

P.D：我也尝试将这些项连接到循环中的变量字符串（_genItems += "<span....>";），最后做同样的事情：

letterButtons.innerHTML = _genItems;

结果是一样的，但在这种情况下它什么都没有显示。如果我记录letterButtons.innerHTML值，它包含所有元素，但在DOM资源管理器中它没有显示任何内容。

Answer 1

在尝试解决此问题数小时后，我尝试使用这段代码：

<div style="width: 100%;">
  <div class="FXmasonryWrapper" id="letterContainers">
    <div class="bioBarTitle" id="letterButtons"></div>
    <br>   
  </div>
</div>

我从Wrapper中取出了BarTitle，现在可以了。我真的没有理由说明为什么会这样。

<div style="width: 100%;">
  <div class="bioBarTitle" id="letterButtons"></div>
  <br>
  <div class="FXmasonryWrapper" id="letterContainers"></div>
</div>

innerHTML有值但只显示第一个元素

1 个答案: