使用AJAX和jQuery .get（）从外部文档中检索特定元素

Question

使用ajax和jQuery，我试图在用户切换开关时从外部文档中的特定元素加载内容。 目标内容由切换开关元素的name 。

所以我从HTML开始...

<input id="toggle1" name="externalContent1" class="toggle" type="checkbox">
<input id="toggle2" name="externalContent2" class="toggle" type="checkbox">
<input id="toggle3" name="externalContent3" class="toggle" type="checkbox">

我首先尝试使用'.load（）'...

$('.toggle').click(function () {

  var section = '#' + $(this).attr('name');

  if ($(this).is(':checked')) {
    $('#target').load("content.htm " + section);
  }

  else {
    $(section).remove();
  }
});

此方法有效，但是它将替换#target元素的内容。 我需要添加而不是替换。

所以然后我尝试使用.get()从其他SO 问题中提出一些建议

if ($(this).is(':checked')) {
  var content;
  $.get('content.htm ' + section, function(data) {
    content = data;
    $('#target').append(content);
  });
}

但是这些使用.get() .post()和.ajax()解决方案（至少以我尝试过的方式），不允许我在content.htm指定一个元素，它只是将整个文献。

有没有一种方法可以使用.get()从外部文档中检索特定元素？

正如我一直在思考的过程一样，我想我也可以在检索到的页面中搜索该section ，并仅附加该部分。 我找到了这个建议 ，并尝试了一下，但我对此也没有任何运气：

if ($(this).is(':checked')) {
  $.ajax({
    url: 'content.htm',
    type: 'GET',
    success: function(res) {
      $(res.responseText).find(section).each(function(){
        $('#target').append($(this).html());
      });
    }
  });
}

Answer 1

有了一点技巧，您就可以使用.load()解决方案。 首先加载到单独的元素中，然后追加。

if ($(this).is(':checked')) {
    $('<div id="tempForLoad">').load("content.htm " + section, function(){
        $('#target').append($('#tempForLoad').html());
        $('#tempForLoad').remove();
    });
 }