Изменить полный контент DIV с помощью Javascript

Question

Я новичок в Javascript и уже знаю, как сменить его в HTML. Но теперь я хочу изменить полный контент div.

У меня есть div с 2 кнопками, одна из которых называется «Войти». Что я хочу:

Когда посетитель нажимает «Войти», div показывает «другое содержимое», где вы можете войти в систему.

Как я могу это сделать?

Edit:

ДИВ Содержание:

 <div id="vote" align="center"> 
     <span style="font-size: 30px">Voten</span><br /><br /> 
     <?php 
      if(isset($_SESSION['username']) && isset($_SESSION['password'])) { 
     ?> 

     <?php 
      } else { 
     ?> 
      <script type="text/javascript"> 
       function login() { 
        Change div content.... 
       } 

       function register() { 
        alert('coming soon, lol'); 
       } 
      </script> 
      You must be logged in, to vote.<br /> 
      <input type="button" class="button" name="login" id="login" value="Login" onclick="login()" /><br /><br /> 
      Not a member yet?<br /> 
      <input type="button" class="button" name="login" id="register" value="Register now!" onclick="register()" /> 
     <?php 
      } 
     ?> 

снова: Что я хочу, если посетитель нажимает кнопку Войти, содержание DIV изменится на другой HTML-кода.

Answer 1

С чистого JavaScript, у вас есть две возможности:

1. Используйте свойство innerHTML на объект сНу, который будет анализировать вам и создать вы DOM узлы
2. Создать сами эти DOM узлов. Wikipedia Link for DOM

Использование innerHTML:

Это будет использовать HTML-парсер браузера.

// You first have to select this DIV, for example by Id 
var divContainer = document.getElementById('idOfDiv'); 

// Let's set the new HTML content of the div 
divContainer.innerHTML = '<b>The HTML code you want !</b>'; 

Создание DOM узлов:

var divContainer = document.getElementById('idOfDiv'); 

// You need to create the DOM nodes you want want to append 
var newDomNode = document.createElement('p'); // Put as property the tag you want to create 

// You have multiple choices here, you can set again the newDomNode innerHTML : 
newDomNode.innerHTML = '<b>Some HTML</b>'; 

// Or the innerText : (This will just put text) 
newDomNode.innerText = 'Some Text to say Hello!'; 

Затем необходимо добавить созданную newDomNode к желаемому DIV, это будет вставить узел в качестве последнего дочернего контейнера:

divContainer.appendChild(); 

Вы можете добавить эти узлы рекурсивно. Например, вы можете добавить другой узел DOM в newDomNode. Вы также можете использовать divContainer.insertBefore()(link), чтобы иметь возможность разместить узел, где хотите.

Это чистый JavaScript, это хороший способ понять, как работает JavaScript. Понимание DOM очень важно, прежде чем перейти к jQuery. Но в реальной жизни для этого будет проще использовать библиотеку jQuery.