동적 text()쓰면 버튼 안에 img태그 없어짐...??

개발하다 발견함

<button type="button" th:id="img_a">
	<img src="/resources/images/pic.png" alt=""> 사진 추가
</button>

 

이런 버튼이 있었음

클릭하면 input Type='file'인 요소가 추가되고 이미지를 ajax 통신하는 부분이 있었음

암튼 그렇다 치고

 

ajax status가 success후 

 

src="/resources/images/pic.png" 이미지 경로를 다른 이미지 경로로 바꾸고

 

"사진 추가" 텍스트를 "확인"으로 바꾸고 싶었음

 

단순하게

 

success : function(obj, txtStatus, jqXHR){
    if(txtStatus==="success") {
       
    }

success에

$("#img_a).text('확인'); 코드를 넣으니 img태그가 없어져 버렸음

 

HTML 태그를 인식하지 않고 텍스트로만 처리합니다.

따라서 text() 함수를 사용하면 HTML 태그가 제거되고 텍스트만 남게 됩니다.

 

let newImageHtml = '<img src="/new/image/source.png" alt=""> 새로운 텍스트';
$(버튼ID).html(newImageHtml);

 

이렇게 처리함