0

所以我正在尝试学习 javascript，我想我有一个可以工作的 json 脚本，它带有一个循环来获取数据，但我无法弄清楚如何将数据附加到我的 div 中。在我弄清楚这一点后，我将在 jquery 中重做它（因为我也在努力学习）。

假设我的 div id 是#wrapper

for (var i = 0; i < providerlisting.length; i++) {
document.write('<div class="entry panel row"> \
    <div class="large-4 columns first"> \
            <div class="name">' + providerlisting[i].nametitle + '</div> \
            <div class="specialty">' + providerlisting[i].caretype + '</div> \
            <div class="peferred">' + providerlisting[i].preferredprovider + '</div> \
        </div> \
        <div class="large-3 columns second"> \
            <div class="address">' + providerlisting[i].address1 + '<br /> \
            ' + providerlisting[i].address2 + '<br /> \
            ' + providerlisting[i].citystatezip + ' \
            </div> \
        </div> \
        <div class="large-3 columns third"> \
            <img src="' + providerlisting[i].coverage + '" alt="example"> \
        </div> \
        <div class="large-2 columns fourth"> \
            <div class="status">' + providerlisting.status + '</div> \
            <a data-dropdown="actionsMenu2" class="actions button small secondary round dropdown" href="#">Actions</a><br> \
            <ul id="actionsMenu2" data-dropdown-content="" class="f-dropdown"> \
                <li><a href="' + providerlisting[i].psn + '">Generate PSN</a></li> \
                <li><a href="' + providerlisting[i].dcontact + '">Download Contact</a></li> \
                <li><a href="' + providerlisting[i].save + '">Save to Provider List</a></li> \
                <li><a href="' + providerlisting[i].rating + '">View Healthgrades Rating</a></li> \
            </ul> \
        </div> \
    </div>  \
')};
4

2 回答 2

4

不要使用document.write，这是直接输出（<script>可能在哪里）。而且，在不进入 DOM 对象的情况下，您将需要附加到.innerHTML. 例如

var wrapper = document.getElementById('wrapper');

for (...){
  /*document.write(*/
  wrapper.innerHTML +=
    '<div ...'
  ;
  /*);*/
}

现在，您可以开始使用 DOM 元素了。例如：

var wrapper = document.getElementById('wrapper');

for (...){
  // create the outer div (with classes 'entry panel row'):
  var entry_panel_row = document.createElement('div');

  // add the class names:
  entry_panel_row.className = 'entry panel row';

  // instead of document.write, add the HTML to this new element...
  entry_panel_row.innerHTML += '<div class="large-4 ...</div>';

  // now append the element (as a whole) to wrapper
  wrapper.appendChild(entry_panel_row);
}

更进一步，您可以一个一个地创建元素，而不是使用字符串，并将它们附加到每个父级。然后，一旦您将整个 DOM 元素编译到其中，entry_panel_row您就可以继续wrapper.appendChild(entry_panel_row).

jQuery（有点）比一遍又一遍更容易el = document.createElement，parent.appendChild(el)而且命名法需要一点时间来适应，但这就是你所拥有的。我想我会翻译它，这样你就可以看到 jQuery（你提到过学习它）：

for (var i = 0; i < providerlisting.length; i++){
  var pl = providerlisting[i]; // shorthand reference

  // begin building you DOM element
  $('<div>')
    .addClass('entry panel row') // css classes
    .append( // children
      $('<div>').addClass('large-4 columns first').append(
        $('<div>').addClass('name').text(pl.nametitle),
        $('<div>').addClass('specialty').text(pl.caretype),
        $('<div>').addClass('preferred').text(pl.preferredprovider)
      ),
      $('<div>').addClass('large-3 columns second').append(
        $('<div>').addClass('address').html(pl.address1 + '<br />' + pl.address2 + '<br />' + pl.citystatezip)
      ),
      $('<div>').addClass('large-3 columns third').append(
        $('<img>').attr({'src':pl.coverage,'alt':'example'})
      ),
      $('<div>').addClass('large-2 columns fourth').append(
        $('<div>').addClass('status').text(pl.status),
        $('<a>').addClass('actions button small secondary round dropdown').prop('href','#').data('dropdown','actionsMenu2').text('Actions'),
        '<br />',
        $('<ul>').prop('id','actionsMenu2').addClass('f-dropdown').data('dropdownContent','').append(
          $('<li>').append(
            $('<a>').prop('href',pl.psn).text('Generate PSN')
          ),
          $('<li>').append(
            $('<a>').prop('href',pl.dcontact).text('Download Contact')
          ),
          $('<li>').append(
            $('<a>').prop('href',pl.save).text('Save to Provider List')
          ),
          $('<li>').append(
            $('<a>').prop('href',pl.rating).text('View Healthgrades Rating')
          ),
        )
      )
    )
    .appendTo('#wrapper'); // add it to #wrapper
}
于 2013-08-28T13:55:26.577 回答
0

您可以使用

document.getElementById('wrapper').innerHtml = document.getElementById('wrapper').innerHtml + 'new content';
于 2013-08-28T13:58:58.360 回答