Как кликом по ссылке скрыть ее, а на ее месте вызвать div блок?

[Lefseq]

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

[Nexus]

<a href="https://google.com/">Click me</a>

<script>
document.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();

    const div = document.createElement('div');
    div.innerHTML = 'div';

    this.outerHTML = div.outerHTML;
});
</script>

Или так (более предпочтительнее):

<a href="https://google.com/">Click me</a>

<script>
document.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();

    const div = document.createElement('div');
    div.innerHTML = 'div';
    
    this.parentNode.insertBefore(div, this);
    this.parentNode.removeChild(this);
});
</script>

[Lefseq]

Nexus,
Спасибо большое!

[Lefseq]

Nexus,
Сразу не заметил, но получается, так, что это работает только для одной ссылке (для одного клика). А если на странице несколько ссылок, как сделать, так, чтобы кликая по нескольким ссылкам скрывать их и выводить div блоки?

[Nexus]

Используйте:
https://developer.mozilla.org/ru/doc...erySelectorAll

[slawkanikitin]

Спасибо большое, как я давно это искал!

[Lefseq]

Nexus,
Я не понимаю, что мне с этим делать? Вы бы не могли конкретно показать, что и где нужно прописать?

[Nexus]

Lefseq, приложите хоть какие-либо усилия для решения этой задачи.
Покажите код, который у вас получился и я либо кто-нибудь другой подскажем, что в вашем коде нужно поправить.

Альтернативный вариант - создать топик в разделе «Работа», правила раздела только прочитайте.