Как изменить существующее значение div в javascript?

Question

У меня есть страница, которая показывает определенный div, как это,

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

но одним щелчком мыши я хочу динамически изменить свой div на что-то вроде этого.

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

Как это сделать?

Answer 1

Если вы в jQuery, вы можете привязать событие click к любому элементу и изменить его следующим образом (убедитесь, что 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

Единственная разница, которую я вижу, это идентификатор. Если так ...

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

Answer 3

Javascript имеет обработчик событий onclick для определения кликов и getElementById для идентификации элементов по 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';
}