альтернатива appendChild

[JohnJohn]

Добрый, подскажите, а есть альтернатива appendChild, которая при повторном appendChild в тот же div, будет перезаписывать первый и т.д.
Объясню более подробно, у меня есть div и три кнопки(так же есть три div с каким то контентом, которые по умолчанию display:none). Мне нужно, что бы при нажатии на кнопку в div(который один), подтягивался div(один из трех, который при нажатии будет получать display:flex). Если это делать при помощи appendChild, тогда все divы будут добавляться, а мне надо, что бы при нажатии на кнопки подтягивались определенные div и исчезали те, которые аппендились ранее. Спасибо.
Если плохо объяснил, простите.

[j0hnik]

el.parentNode.replaceChild(newChild, oldChild);

[j0hnik]

или как по старинке,
старый удаляем

el.parentNode.removeChild(OldEl);

новый вставляем

el.parentNode.appendChild(NewEl);

[JohnJohn]

а если у меня oldChild много, например 7 кнопок и 7 соответственно div'ов, получается указав el.parentNode.replaceChild(2, 1); нажав на 3 он доваится ко 2. Может я не так конечно понял.

[j0hnik]

если у вас в родительском элементе много дивов которые нужно заменить на один и больше ничего нужно нет то так.

el.innerHTML = <div>NEW-EL</div>;

а если в родительском элементе нужно удалять не все, а выборочно то так

el.parentNode.removeChild(OldEl);
el.parentNode.removeChild(OldEl2);
el.parentNode.removeChild(OldEl3);

новый вставляем

el.parentNode.appendChild(NewEl);

[JohnJohn]

ну да, второй вариант подходит, кода конечно много будет, спасибо большое

[JohnJohn]

Хотя, removeChild не совсем подходит, потому что каждый div, который аппендится при клике на кнопку берет el.style.display = 'flex'. Вот так работает норм - el.parentNode.appendChild(NewEl); остальные el2.parentNode.style.display = 'none';
el3.parentNode.style.display = 'none';
el4.parentNode.style.display = 'none';

Но кода конечно получается очь много.

[Dilettante_Pro]

Да хоть 100500 штук - скрипт один и тот же.

<div>
   <button value='i1'>Button1</button>
   <button value='i2'>Button2</button>
   <button value='i3'>Button3</button>
   <div id='i1' class='cont' style='display:none'>Content 1</div>
   <div id='i2' class='cont' style='display:none'>Content 2</div>
   <div id='i3' class='cont' style='display:none'>Content 3</div>
</div>
<script>
  [].forEach.call(document.querySelectorAll('button'), function(item) {
        item.onclick = function() {
            [].forEach.call(document.querySelectorAll('.cont'), function(el) {
                el.id == item.value ? el.style.display = 'flex': el.style.display = 'none';
            })
        }
  });
</script>