자바 스크립트에서 기존 div 값을 변경하는 방법은 무엇입니까?

Question

는이 같은 특정 사업부를 표시하는 페이지

<div id="placeholder1" style="height: 150px;"></div> 

을 가지고 있지만 약간의 클릭에 나는 이런 일에 동적으로 내 사업부를 변경하고 싶습니다.

<div id="placeholder2" style="height: 150px;"></div> 

어떻게 할 수 있습니까?

Answer 1

당신이 만약 사용합니다 ' jQuery를 다시 사용하면 클릭 이벤트를 어떤 요소에 바인딩하고 변경할 수 있습니다 (DOM이 먼저로드를 완료했는지 확인).

$(function() { 
    $('#click_me_to_change_id').bind('click', function() { 
    $('#placeholder1').attr('id', 'placeholder2'); 
    }); 
}); 

편집 : 나는 숨길 실현 검사시/쇼 div의 서로 다른이 밖으로 시도 :

이 둘 사이의 유일한 차이점은`id` ... 당신이 원하는됩니다입니다

$(function() { 
    $('#click_me_to_toggle_visible_div').bind('click', function() { 
    $('#placeholder1').css('display', 'none'); 
    $('#placeholder2').css('display', 'block'); 
    }); 
}); 

Answer 2

유일한 차이점은 ID입니다. 그렇다면 ...

document.getElementById('placeholder1').id = 'placeholder2'; 

Answer 3

자바 스크립트 클릭을 감지하는 onclick 이벤트 핸들러를 가지고 있으며,에서 getElementById는 ID로 요소를 식별 할 수 있습니다. 당신이 ID를 변경하려는 경우 은 사용

var div = document.getElementById('placeholder1'); 
div.onclick = function(){ 
    div.id = 'placeholder2'; 
} 

가 표시되는 변경, 가정 당신이 HTML을 가지고 :

<div id="placeholder1" style="height: 150px;"></div> 
<div id="placeholder2" style="height: 150px;display:none"></div> 

당신이

var div = document.getElementById('placeholder1'); 
var div2 = document.getElementById('placeholder2'); 
div.onclick = function(){ 
    div.style.display = 'none'; 
    div2.style.display = 'block'; 
}