Как добавить кнопку к ссылке?

Question

[MRcracker]

Есть ссылки. Нужно через js к каждой ссылке добавить кнопку. Подскажите где я ошибся, что кнопка не добавляется?

<a class="navigation__link" href="#">1</a>
<a class="navigation__link" href="#">2</a>
<a class="navigation__link" href="#">3</a>

let btn = document.createElement('button');//создаём нашу кнопку
let link = document.getElementsByClassName('.navigation__link');
let textInBtn = document.createTextNode('BUTTON');//создаем текст для кнопки
btn.appendChild(textInBtn);//добавляем текст в кнопку
link.appendChild(btn);

Answer 1

[Rsa97]

Элементы форм не могут быть внутри ссылки. HTML 5.2 Specification

4.5.1. The a element
Content model:
Transparent, but there must be no interactive content or a element descendants.

Interactive content is content that is specifically intended for user interaction.
a (if the href attribute is present), audio (if the controls attribute is present), button, details embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the Hidden state), label, select, textarea, video (if the controls attribute is present).
The tabindex attribute can also make any element into interactive content.

Answer 2

[Тигран Абрамян]

Циклом пробежитесь и тогда добавите кнопку к каждой ссылке.

const links = document.querySelectorAll('.navigation__link');

links.forEach(link => {
  const btn = document.createElement('button');
  btn.textContent = "BUTTON";

  link.appendChild(btn);
});

А что у вас там ошибка была в консоле показывает.

Comments

[MRcracker]

да я не перебрал элементы. Вам в очередной раз спасибо)))

[MRcracker]

MRcracker, MRcracker, скажите, как сделать, чтобы кнопка была не в ссылке, а отдельный элемент?

[Тигран Абрамян]

MRcracker, легко

другого варианта в голову не приходит.

[Дмитрий]

MRcracker, link.insertAdjacentElement('afterend', btn);