Question

我的DOM层次结构中有一组名为item-group-button的元素。我使用以下jQuery代码来获取上面指定的元素，并将新内容追加到元素的内部HTML中。

    function getMajorGroups(){
    var element = $(".item-group-button");
    $.get("http://localhost:9157/getAllMajorGroups", function(data){
        if(data.majorGroups.length != 0){
            $('.panel_list').empty();

        }
        for(var i = 0; i < data.majorGroups.length; i++){
            element[i].appendChild("<h3>" + data.majorGroups[i] + "</h3>");
            $('.panel_list').append(element);
        }
    });
}

元素代码如下。

<div class="item-group-button">
    <!-- Item Group Selection Button -->
        <h3>Beverage</h3>
</div>

但是当我运行代码时，元素不会被清除，新内容也会附加当前内容。

我要做的是连接到Web服务，并根据收到的数据填充html元素。如有任何一个有更好的建议请赐教！

谢谢你！

Answer 1

您必须在控制台中收到错误，jquery中没有appendChild。

$('.panel_list').appendChild(element);

应该是

$('.panel_list').append(element);

Answer 2

我认为您应该使用.clone()，因为根据我在代码中看到的内容，您一次又一次地追加element，产生一些重复的值。

function getMajorGroups(){
  var element = $(".item-group-button");
  $.get("http://localhost:9157/getAllMajorGroups", function(data){
    if(data.majorGroups.length != 0){
      $('.panel_list').empty();
    }
    for(var i = 0; i < data.majorGroups.length; i++){
      var clone = element.clone();
      clone.append("<h3>" + data.majorGroups[i] + "</h3>");
      $('.panel_list').append(clone);
    }
  });
}

获取文档中的元素并添加子元素

2 个答案: