html 요소를 ajax 응답으로 대체하는 방법은?

html 요소를 ajax 응답으로 대체하는 방법은?

ajax 응답에서 html 요소를 대체하려면 어떻게 해야 합니까?제가 아는 것은 요소를 제거하는 것인데, 제거된 태그를 ajax 응답으로 대체하려면 어떻게 해야 합니까?예를 들어,

나는 다음과 같은 코드를 가지고 있습니다.

<ul id="products">
...............
</ul>

버튼을 클릭하면 ul에서 시작하여 closing ul에서 끝나는 다른 뷰에서 데이터베이스에서 가져온 새로운 데이터를 수신하고 렌더링되는 코드진터 컨트롤러로 ajax 호출이 이루어집니다.

ajax success function에서 나는 다음과 같이 합니다.

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?

replaceWith(http://api.jquery.com/replaceWith/) 참조)를 사용할 수 있습니다.

좋아요:$('#products').replaceWith(response);

제품을 교체하는 경우 컨트롤러에서 HTML 형식을 지정하는 경우 이 작업을 수행합니다.

success : function(response) {
$('#products').html(response);
}

< ul > 태그를 제거할 필요가 없습니다.이전 <li>s를 새 <li>s로 간단히 바꿀 수 있습니다.

편집: pascalvgemert가 언급한 replaceWith 기능이 더 좋습니다. https://stackoverflow.com/a/19527642/2887034

주변에 래퍼를 만듭니다.

<div id="wrapper">
    <ul id="products">
    ...............
    </ul>
</div>

이제 다음을 수행할 수 있습니다.

$('#wrapper').html(responseData);

JQuery를 사용할 수 있습니다.

$('#products').before("yourhtmlreceivedfromajax").remove();

아니면 그냥 div의 내용을 html로 대체하세요. $('#products').html("yourhtmlreceivedfromajax");

메인 디브가 다른 ID를 가진 다른 컨테이너 안에 있는 경우 다음을 수행할 수 있습니다.

이 구조에 따라:

<div id="mainContainer">
    <ul id="products">
         ...............
    </ul>
</div>

jax용 jquery를 사용한 자바스크립트 코드

$.ajax({
  url: "action.php",
  context: document.body
}).done(function(response) {
  $('#products').remove(); // you can keep this line if you think is necessary
  $('mainContainer').html(response);
});

쉬운 방법은 용기에 당신의 ul을 싸는 것입니다.

<div id="container">
<ul id="products">
...............
</ul>
</div>

아약스 응답으로

success:function(data){
$("#container").html(data)
}

.remove()는 요소를 DOM에서 완전히 꺼냅니다.만약 당신이 단지 안에 있는 물건들을 교체하고 싶다면,products요소, 당신이 사용합니다.교체 대상().

반품하시는 경우 모두<li>HTML로 .html()을 사용할 수 있습니다.

이 작업을

$( "ul#products" ).replaceWith( response );

http://api.jquery.com/replaceWith/

언급URL : https://stackoverflow.com/questions/19527586/how-to-replace-html-element-with-ajax-response