Создание ссылок внутри списка

Question

У меня есть список, глядя, как этот

<li class="list">text1</li> 
<li class="list">text2</li> 
<li class="list">text3</li> 

и хотите, чтобы сделать текст ссылки, с этим результатом с помощью JavaScript

<li class="list><a href="#text1">text1</a></li> 
<li class="list><a href="#text1">text1</a></li> 
<li class="list><a href="#text1">text1</a></li> 

Я уже сделал это, но дон Не знаете, как это сделать дальше?

var link1 = document.createElement("a"); 
link.href = "#text1" 

Можно ли сделать петлю или что-то подобное, так что я не должен писать один и тот же код для всех трех звеньев?

Answer 1

Да, сначала нужно найти все список классов тегов и петли через них.

var lists = document.getElementsByClassName("list"); 
for(var i=0; i<lists.length; i++) { 

Следующая найти текст текущего элемента списка, сохранить его в переменной, а затем очистить текст элемента.

var text = lists[i].textContent; 
lists[i].textContent = ""; 

В-третьих, создать a элемент и сделать TextContent из элемента текст текущего списка и HREF, текущий текст плюс # знак.

var a = document.createElement("a"); 
a.href = "#"+text; 
a.textContent = text; 

И, наконец, добавьте элемент a к элементу текущего списка.

lists[i].appendChild(a); 

var lists = document.getElementsByClassName("list"); 
 
for(var i=0; i<lists.length; i++) { 
 
    var text = lists[i].textContent; 
 
    lists[i].textContent = ""; 
 
    var a = document.createElement("a"); 
 
    a.href = "#"+text; 
 
    a.textContent = text; 
 
    lists[i].appendChild(a); 
 
}

<li class="list">text1</li> 
 
<li class="list">text2</li> 
 
<li class="list">text3</li>

`

Answer 2

итерацию по списку элементов, придающих якорь HTML как текст замены:

[].forEach.call(document.querySelectorAll('.list'), function (el) { 
    var txt = el.textContent; 
    el.innerHTML = '<a href="#' + txt + '">' + txt + '</a>'; 
}); 

DEMO