Erstellen Sie Links in einer Liste

Question

Ich habe eine Liste wie diese

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

suchen und wollen den Text-Links zu machen, mit diesem Ergebnis mit 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> 

ich dies bereits getan hat, aber don Weiß ich nicht weiter?

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

Ist es möglich, eine Schleife oder etwas ähnliches zu machen, damit ich müssen nicht den gleichen Code für alle drei Verbindungen schreiben?

Answer 1

Ja, müssen Sie zuerst durch sie alle der Listenklasse-Tags und Schleife finden.

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

Weiter, um den Text des aktuellen Listenelement finden, sollte sie in einer Variablen und dann den Text des Elements löschen.

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

Drittens erstellen Sie das a Element und machen das textcontent des ein Element der Text der aktuellen Liste und der href, der aktuelle Text plus # Zeichen.

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

Und schließlich das eine auf das aktuelle Listenelement anhängen.

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

Iterate über die Listenelemente Hinzufügen der Anker HTML als Text Ersatz:

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

DEMO