В jQuery, как загрузить содержимое ajax после указанного элемента
У меня есть следующий 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>
4 ответов:
Используйте функцию после.
Всем, кто все еще ищет решение, я бы предложил использовать
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. });
У меня есть один интересный, но довольно сложный и трудный для понимания метод, но используемый .функция нагрузки. Итак, код:
$('#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 и .загрузите () html в него с помощью callback-функции
$(this).children().unwrap();Которая логически развернется в наш noname div и "переименуйте" его в наш #div_after из загрузки html. Это также не нужно, если вы хотите использовать только noname div.
Ура!
P.S. Мне потребовалось некоторое время в проекте, чтобы объединить все это вместе:) я хотел бы, чтобы это было полезно.
Comments