jQuery在单个DIV容器下的几个外部HTML元素

Question

我的目标是从外部HTML加载三个不同的 div 元素，并使用jQuery将其插入到父HTML的同一 div 容器中。

目前，我的代码如下（外部HTML，摘录）：

 <div id="wrapper">
    <div id="content">Main.</div>
    <div id="rightcolumn">Right.</div>
    <div id="legendcolumn">Legend.</div>
 </div>

我想将 div id =“inserted”下的所有三个 div 元素插入到父HTML中。在jQuery中，我找到了 load（）函数。但是，它会替换元素下的所有内容，并且不会附加它。

$("#inserted").load("external.html #wrapper");

此代码替换 body 下的所有先前元素。

Answer 1

您可以使用$.get或$.post ajax函数代替.load()函数，该函数仅用于处理一件事情。您的代码将如下所示：

$.get('external.html', function(data){
    $(data).find('#wrapper > div').appendTo('#inserted');
});

external.html可以通过data变量访问，所以我们用jQuery函数包装它，然后在将它们附加到当前页面中的正确元素之前找到我们需要的元素。