В jQuery, как загрузить содержимое AJAX после указанного элемента

Question

У меня есть следующий HTML:

<div id="mydiv">
</div>

Я хотел бы загрузить контент с помощью jQuery, чтобы он появлялся после моего DIV.

Я пробовал это:

$("#mydiv").load("/path/to/content.html");

Однако, это заканчивается следующим результатом:

<div id="mydiv">
<p>content from file</p>
</div>

Как мне получить этот результат?

<div id="mydiv">
</div>
<p>content from file<p>

Answer 1

Всем, кто еще ищет решение, я бы предложил использовать jQuery.get() вместо .load() для загрузки содержимого AJAX. Затем используйте функцию .after() для указания предыдущего элемента.

Вот пример:

$.get('url.html', function(data){ // Loads content into the 'data' variable.
    $('#mydiv').after(data); // Injects 'data' after the #mydiv element.
  });

Answer 2

Используйте функцию после .

Answer 3

У меня есть один интересный, но довольно сложный и трудный для понимания метод, но использующий функцию .load. Итак, код:

$('#div_after').remove();
$('#mydiv').after($('<div>').load('/path/to/content.html #div_after', {
    data: data, //variables to send. Useless in your case
}, function () {
    $(this).children().unwrap();}
));

Смотрите, я добавил метод .remove (), чтобы удалить ранее созданный div, если вы используете этот код более одного раза. Вы можете удалить первую строку, если она будет использоваться только один раз. Идея состоит в том, что .after ($ '') создает элемент noname div на странице после #mydiv и .load () html в него с помощью callback-функции

$(this).children().unwrap();

, который логически будет развернут в наш noname div и "переименует" его в наш #div_after после загрузки html. Это также не нужно, если вы хотите использовать просто noname div.

Ура!

P.S. Мне потребовалось некоторое время в проекте, чтобы объединить все это вместе :) Я хотел бы, чтобы это было полезно.

Answer 4

с функцией after (content)