使用 $.get 从另一个页面上的特定 div 导入内容并将它们插入到 2 div

Question

我想从中导入数据的外部页面如下所示：

<div id="cont1">something</div>
<div id="cont2">something else</div>

我正在使用此代码获取内容：

$.get("page.html", function(data) {
  $("#container1").html(data);
  $("#container2").html(cont2);
});

它可以工作，但不太正确，因为它也在导入容器。如何只导入内容而不导入容器？

Answer 1

您的 $.get() 回调也在导入容器，因为完整的响应 data（包括两个外部 <div>）被设置为 innerHTML。

仅附加内容而不附加其容器：

使用jQuery
解析datahtml字符串
```
const $data = $(data);
```
使用 #id
过滤两个 div
```
$data.filter("#cont1")
$data.filter("#cont2")
```
这是棘手的部分！ 如果您尝试使用 find() 提取容器，如其他链接问题中所述，提取将无声地失败，因为 find() returns 空 jQuery 集合在这里。
```
$data.find("#cont1").length == 0 // true
$data.find("#cont1").html() == undefined // true
```
这是因为 data 中没有根元素，<div> 是彼此的兄弟。

将其 innerHTML 内容复制到当前文档的容器中

$("#container1").html($data.filter("#cont1").html());
$("#container2").html($data.filter("#cont2").html());

以下是解析上述内容的完整示例。 _{请忽略所有 testdouble 的 td 调用，那只是为了准备测试用例以在收到 $.get() 调用时用模拟 AJAX 响应进行响应。}

// Stub AJAX reponse
td.when(td.replace($, "get")("page.html")).thenCallback(`
    <div id="cont1">
        <b>testdouble.js</b> (td.js)
    </div>
    <div id="cont2">
        <i>Mocking library for JavaScript tests</i>
    </div>
`);

// Test response parser
$.get("page.html", function(data) {
  const $data = $(data);
  console.log($data.find("#cont1").length); // 0
  $("#container1").html($data.filter("#cont1").html());
  $("#container2").html($data.filter("#cont2").html());
  console.log($("#containers").prop("outerHTML"));
});

td.reset();

<html>
<head>
  <title>Parse AJAX Response Test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/testdouble@3.16.1/dist/testdouble.js"></script>
</head>
<body>
  <div id="containers">
    <div id="container1"></div>
    <div id="container2"></div>
  </div>
</body>
</html>

使用 $.get 从另一个页面上的特定 div 导入内容并将它们插入到 2 div

Using $.get to import contents from specific divs on another page and insert them into 2 divs

jquery

innerhtml