jquery add() 메소드와 html() 메소드의 차이점과 use_jquery 소개

append(content): 이 메소드는 선택한 요소의 끝(아직 내부)에 지정된 내용을 삽입합니다. 많은 친구들은 add가 html과 유사하다고 생각합니다. HTML에서는 현재 콘텐츠를 모두 대체합니다.

정의 및 사용법

append() 메서드는 지정된 콘텐츠를 선택한 요소의 끝(여전히 내부)에 삽입합니다.
$(선택기).append(콘텐츠)

함수를 사용하여 콘텐츠 추가
함수를 사용하여 지정된 요소 끝에 콘텐츠를 삽입합니다.

문법

$(selector).append(function(index,html))

예제 코드:

<script src="/jquery.min.js" type="text/javascript"></script> 
<style> 
.imgFocus{border: 1px solid #eee;} 
</style> 
<p> </p> 
<script type="text/javascript"> 
var showimg = "<div class='imgFocus'>123456</div>"; 
$("p").append(showimg); 
</script>

html() 메서드는 선택한 요소의 콘텐츠(내부 HTML)를 반환하거나 설정합니다.

이 메서드가 매개변수를 설정하지 않으면 선택한 요소의 현재 콘텐츠를 반환합니다.
요소 콘텐츠 반환
이 메서드를 사용하여 값을 반환하면 일치하는 첫 번째 요소의 내용이 반환됩니다.

문법

$(selector).html()

모든 p 요소의 내용 설정:

$(".btn1").click(function(){ 
$("p").html("Hello <b>world</b>!"); 
});

지정된 요소 지우기

$("a[href$='logout.asp']").click(function(event) { 
event.preventDefault(); 
$.get("/xxlr/Logout.asp","",function(data, textStatus) { 
if (data == 1) { //表明注销成功 
$('#message').html(""); 
$("#userlogin>div").show(); 
} 
else { 
$('#message').append("<p><strong>注销失败,请重新尝试!</strong></p>"); 
} 
}); 
});

다음은 네티즌들이 추가한 내용입니다.

물론 다릅니다. 추가는 추가를 의미하고 html은 완전히 교체를 의미합니다
예를 들어d3b65352104a3dac7b6b81156e36ccade388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
$("#1").html("45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d114");
결과는 다음과 같습니다.d3b65352104a3dac7b6b81156e36ccad45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

$("#1").append("45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114");
결과는 다음과 같습니다.d3b65352104a3dac7b6b81156e36ccade388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a345a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3