Манипуляции с элементами (событие onclick)

[Antoxa Goaller]

Приветствую вас, друзья! Не могу понять как сделать так, чтобы появлялся лишь один элемент по нажатию на ссылку (с событием onclick),а по второму нажатию убирался.
Как это можно сделать?

Вот мой код:

<div id="inf" style="width:250px; height:100px; border:1px solid #000; margin:100px;" ></div>	

<div class="m">
<a href="javascript://" onclick="PostRU();" >
<img src="http://javascript.ru/cat/list/dom.gif" width="121" height="62" alt=''/>
</a>	
</div>

<div class="m">
<a href="javascript://" onclick="PostTa();">
<img src="http://javascript.ru/cat/list/event.gif" width="121" height="62" alt=''/>
</a>
</div>

<script>
function PostRU() {
var element = document.createElement('div'); 
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>';
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
};

function PostTa() {
var element = document.createElement('div'); 
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="name">Имя:</label><input type="text" id="name" placeholder="(ФИО) Иванов Иван Иванович" class="input1"/></div><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>'; 
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
}
</script>

[Nexus]

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Antoxa Goaller]

<div id="inf" style="width:250px; height:100px; border:1px solid #000; margin:100px;" ></div>	

<div class="m">
<a href="javascript://" onclick="PostRU();" >
<img src="http://javascript.ru/cat/list/dom.gif" width="121" height="62" alt=''/>
</a>	
</div>

<div class="m">
<a href="javascript://" onclick="PostTa();">
<img src="http://javascript.ru/cat/list/event.gif" width="121" height="62" alt=''/>
</a>
</div>

<script>
function PostRU() {
var element = document.createElement('div'); 
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>';
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
};

function PostTa() {
var element = document.createElement('div'); 
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="name">Имя:</label><input type="text" id="name" placeholder="(ФИО) Иванов Иван Иванович" class="input1"/></div><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>'; 
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
}
</script>

[Antoxa Goaller]

Nexus, cпасибо за замечание! Недавно здесь - пока не научился всё делать правильно

[j0hnik]

<button>Click</button> 
<output></output>
	<script>
		var i = 0;
	document.querySelector('button').onclick = function(){
		document.querySelector('output').value = ++i%2? 'Какое-то значение':'';
	};
	</script>

Способов тьма

[Antoxa Goaller]

"Какое-то значение" выводится текстом, а html можно вывести?

[Dilettante_Pro]

М.б. просто показывать-прятать?

<style>
.hide { display:none; }
</style>
<div id="inf" style="width:250px; height:100px; border:1px solid #000; margin:100px;" >
   <div class="information">
      <div class="outer-block hide">
         <label for="name">Имя:</label>
         <input type="text" id="name" placeholder="(ФИО) Иванов Иван Иванович" class="input1"/>
      </div>
      <div class="outer-block hide">
         <label for="telephone">Телефон:</label>
         <input type="tel" id="telephone" placeholder="79102020202" class="input1"/>
      </div>
   </div>
</div>	

<div class="m">
<a href="javascript://" onclick="PostRU();" >
<img src="http://javascript.ru/cat/list/dom.gif" width="121" height="62" alt=''/>
</a>	
</div>

<div class="m">
<a href="javascript://" onclick="PostTa();">
<img src="http://javascript.ru/cat/list/event.gif" width="121" height="62" alt=''/>
</a>
</div>

<script>
function PostRU() {
 document.querySelector("#telephone").parentNode.classList.toggle("hide");
};

function PostTa() {
   document.querySelector("#name").parentNode.classList.toggle("hide");
}
</script>

[Antoxa Goaller]

Вероятно, это не самое лучшее решение, но на данный момент оно мне подошло.
Огромное спасибо!