JQuery несколько внешних HTML элементов под одной DIV контейнера

Question

моей цель состоит в том, чтобы загрузить три различных ДИВА элементов из внешнего HTML и вставьте его под тем же ДИВ контейнера родительского HTML с помощью JQuery.

В настоящее время мой код выглядит следующим образом (внешний HTML, выдержка):

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

И я хотел бы, чтобы вставить все три Див элементов под сНу ид = «вставить» в родительской HTML , В jQuery я нашел функцию load(). Однако он заменяет все содержимое под элементом и не добавляет его.

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

Этот код заменяет все предыдущие элементы под тела.

Answer 1

Вы можете использовать функции ajax $.get или $.post вместо функции .load(), которая была предназначена только для одной вещи и только одной вещи. Ваш код будет выглядеть примерно так:

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

external.html будет доступен через переменную data, поэтому мы обернуть его с помощью функции JQuery, а затем найти элементы, которые нам нужны перед добавлением их к нужному элементу на текущей странице ,