列表中創建鏈接

我有一個列表看起來像這樣列表中創建鏈接

<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"

是否有可能使一個循環或類似的東西，這樣我就不用寫了所有三個環節相同的代碼？

來源

2016-04-03 dory

你能澄清你的問題？如果您已經使用鏈接編輯了HTML，那麼爲什麼您需要對JavaScript做任何事情？你是否在動態改變鏈接？你是否試圖首先動態創建它們？任何澄清將有所幫助！ – JasCav

是的，首先你需要通過他們找到所有的列表類標籤和循環。

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>

來源

2016-04-03 22:42:45 Wowsk

遍歷列表元素添加錨點HTML的文本替換：

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

DEMO

來源

2016-04-03 22:42:22 Andy

列表中創建鏈接

回答

相關問題