javascriptで既存のdiv値を変更するにはどうすればよいですか？

Question

は、私はこのような特定のdivを表示するページ、

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

を持っているが、いくつかのクリックで私はこのような何かを動的に私の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'); 
    }); 
}); 

編集：あなたが欠けている...

$(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

Javascriptがクリックを検出するために、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'; 
}