建立动态HTML元素

如何解决建立动态HTML元素

我想构建一个动态HTML元素。一切正常，没有错误，但是显示内容的结果是

a

我的代码：

<div class="search-result">
 [object Object][object Object][object Object][object Object][object Object]
 <span class="ionicon ion-ios-close-outline"></span>
</div>

解决方法

$html += $(this).clone();返回一个对象，因此$html += $(this).clone();将对象的String表示形式添加到html变量中，该变量始终为“ [object Object]”，您可能想要的是$html += $(this).clone()[0].outerHTML;或只是访问HTML元素的$html += this.outerHTML;。

因此，您的代码全文如下：

$('form.search-form a.btn').on('click',function(e) {
  e.preventDefault();
  if ($('div.search-result')) {
    $('div.search-result').remove();
  };
  var $searchResult = $("<div/>",{
    "class": "search-result"
  });
  var $searchClose = $("<span/>",{
    "class": "ionicon ion-ios-close-outline"
  });

  var $html = '';
  $term = $.trim($('#myInput').val());
  $filter = $term.toUpperCase();
  $('span.aliment-title').each(function(index) {
    $txtValue = $(this).text();
    if ($txtValue.toUpperCase().indexOf($filter) > -1) {
      $html += this.outerHTML;
    }
  });
  $searchResult.html($html);
  $('header.site-header').append($searchResult);
  $searchResult.append($searchClose);

});

,

$searchResult是对象，您可以通过$searchResult.outerHTML()

获取div内容。

将代码行更改为

$('header.site-header').append($searchResult.outerHTML());