Прикрепить href к классу индивидуально

Question

Поэтому я хочу использовать Javascript для добавления трех разных ссылок href в класс 3

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

Я гуглил в поисках решения, но я могу найти, как это сделать, только когда вы не используете класс.

HTML

<li class="navigation">HTML</li>
                <li class="navigation">DOM</li>
                <li class="navigation">Javascript</li>
            </ul>

JS

var links = document.getElementsByClassName("navigation");
  links[0].setAttribute('href', 'www.google.se');

Я хочу взять класс с именем навигация и добавить ссылку href в

.

Answer 1

Элемент li не имеет атрибута href.Это элемент списка, а не якорь.

Вы можете использовать document.createElement для создания элемента a, затем переместить в него текстовый узел внутри элемента списка, а затем добавить элемент a кli, затем добавьте к нему атрибут href.

const listitems = document.querySelectorAll('li');

Object.values(listitems).forEach(item => {
  const text = item.firstChild;
  const link = document.createElement('a');
  link.setAttribute("href", "http://google.com");
  item.appendChild(link);
  link.appendChild(text);
});

<ul>
  <li class="navigation">HTML</li>
  <li class="navigation">DOM</li>
  <li class="navigation">Javascript</li>
</ul>

Answer 2

var link1 = document.getElementsByClassName("navigation1");
var link2 = document.getElementsByClassName("navigation2");
var link3 = document.getElementsByClassName("navigation3");

link1[0].setAttribute('href', 'www.google.com');
link2[0].setAttribute('href', 'www.yahoo.com');
link3[0].setAttribute('href', 'www.test.com');

<ul>
  <li>
    <a class="navigation1">HTML</a>
  </li>
  <li>
    <a class="navigation2">DOM</a>
  </li>
  <li>
    <a class="navigation3">Javascript</a>
  </li>
</ul>

Answer 3

текст li, эффект клика отсутствует, поэтому вы добавляете тег ссылки <a></a>

var links = document.getElementsByClassName("navigation");

links[0].setAttribute('href', 'www.google.se'); //edit the url
links[1].setAttribute('href', 'www.google.se');
links[2].setAttribute('href', 'www.google.se');

<ul>  
  <li ><a class="navigation">HTML</a></li>
  <li ><a class="navigation">DOM</a></li>
  <li ><a class="navigation">Javascript<a/></li>
</ul>