이 Javascript를 수정하여 HTML을 Button 텍스트에 삽입 할 수 있습니까?

Question

@PSL에 의해 this answer에 처음으로 Javascript 코드가 성공적으로 생성되었으며 내 버전을 만들었습니다 (아래 참조). 이 코드는 기본적으로 버튼을 클릭 할 때마다 버튼 내의 텍스트를 변경합니다. 하지만 내가 할 수없는 것은 단추 텍스트에 HTML을 삽입하는 것입니다. 이 작업을 수행하면 버튼 텍스트에 HTML 코드가 표시되지만 실행되는 것은 아닙니다. 누군가이 버튼을 클릭 할 때마다 Button 텍스트에 HTML을 삽입 할 수 있도록이 Javascript를 어떻게 수정해야하는지 알려주실 수 있습니다. 고맙습니다!

예를 들어 나는

현재 HTML 함께 일하고 있어요

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-down"></i> View More Photos</button> 

자바 스크립트

$(function(){ 
$('#viewPhotosButton').click(function(){ 
    $(this).text(function(i,old){ 
     return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ? '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos'; 
    }); 
}); 
}); 

(클릭 후) 버튼에 대한 원하는 HTML 아이콘 - 갈매기 다운이 아이콘 - 갈매기 업 및 보기 더 많은 사진을 변경 한 대신의 숨기기 추가 사진에

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos</button> 

Answer 1

사용 html()을 변경 text()

$(function(){ 
$('#viewPhotosButton').click(function(){ 
    $(this).html(function(i,old){ 
     return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ? '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos'; 
    }); 
}); 
}); 

JSFiddle

Answer 2

text() 대신 html() 메소드 사용 shoul 질문부터 D 작업

$(function(){ 
    $('#viewPhotosButton').click(function(){ 
     $(this).html(function(i,old){ 
      return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ? '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos'; 
     }); 
    }); 
}); 

Answer 3

자바 스크립트가 아닌 jQuery를 태그 누군가가 아닌 jQuery를 대답을 찾고 여기 오면, 여기가 아닌 jQuery를 대안입니다된다

button_element = document.getElementById('viewPhotosButton'); 
button_element.onclick = function() { 
    var i_element = button_element.firstChild; 
    var old_class = i_element.getAttribute('class'); 
    if (old_class == 'icon-align-left icon-chevron-up') { 
     var new_class = 'icon-align-left icon-chevron-down'; 
     var new_text = 'View more photos'; 
    } 
    else { 
     var new_class = 'icon-align-left icon-chevron-up'; 
     var new_text = 'Hide photos'; 
    } 
    i_element.setAttribute('class', new_class); 
    var old_text_node = i_element.nextSibling; 
    var text_node = document.createTextNode(new_text); 
    button_element.replaceChild(text_node, old_text_node); 
}