jquery - 将另一个文件中的 HTML 数据 append 到 div

Question

我想将 HTML block 从外部文件 append 到我的网站。该文件在我的服务器上，包含列表条目的蓝图。当用户搜索某些内容时，结果应 append 一个循环并显示来自外部 HTML 文件的代码。

这是我的页面结构:

主页

<div id="content">
  // Display List elements here
<div>

我的 JQuery 代码

$.('#search-btn').click(function(){
  getElements();
});

function getElements(){
  // Getting elements from server and saving the in the variable data
  for(var i = 0; i < data.length; i++){
    // Append the Elements to the div with id="content"
  }
}

一个元素的蓝图，不同的 HTML 文件

<div class="element">
  <p class="show_name"></p>
  <p class="show_email"></p>
  <p class="show_birthday"></p>
</div>

因此，我需要将多个蓝图 append 到主页的 content-div。关于如何使用 JQuery 实现这个的任何想法？ :)

Answer 1

试试这个解决方案

function getElements(){
  var div = $('#content');
  // Getting elements from server and saving the in the variable data
  $.get( "/url/to/file.html", function(response) {
    for(var i = 0; i < data.length; i++){
      div.append($(response));
    }

  });
}