通过js改变li类变成链接答案

【问题标题】：Change li class via js to become links通过js改变li类变成链接
【发布时间】：2017-05-10 07:27:28
【问题描述】：

如何根据以下列表创建链接，并将它们从列表更改为 Javascript 链接。

<li class="navigation">LOVE</li>
<li class="navigation">HATE</li>
<li class="navigation">LIFE</li>

应该变成：

<li class="navigation><a href="#LOVE">LOVE</a></li>
...

【问题讨论】：

链接到什么？你需要更具体。
您是如何遇到需要这样做的？另外，你卡在哪里了？找到 LI 元素？循环他们？找到他们的内容？创建替换内容？

标签： javascript css dom hyperlink

【解决方案1】：

没有 jQuery：

function makeLinks(ul) {
  for (i of document.querySelectorAll(ul + " > li")) {
    var t = i.innerHTML;
    i.innerHTML = "<a href='" + t.toLowerCase() + "'>" + t + "</a>";
  }
}

makeLinks("#menu");

<ul id="menu">
  <li class="navigation">LOVE</li>
  <li class="navigation">HATE</li>
  <li class="navigation">LIFE</li>
</ul>

【讨论】：

【解决方案2】：

因为我没有看到任何 jQuery 标记，所以这是一个使用纯 javascript 的解决方案。

使用querySelectorAll() 循环所有li 并将每个textContent 替换为所需的节点：

liAll = document.querySelectorAll('li');
liAll.forEach(function(elt) {
  txt = elt.textContent;
  link = document.createElement('a');
  atxt = document.createTextNode(txt);
  link.appendChild(atxt);
  link.setAttribute('href', '#' + txt);
  elt.appendChild(link);
  elt.firstChild.remove();
});

<li class="navigation">LOVE</li>
<li class="navigation">HATE</li>
<li class="navigation">LIFE</li>

【讨论】：

你为什么不使用replaceChild？
@torazaburo 我不确定是否可以将replaceChild() 与字符串一起使用。

【解决方案3】：

$('li.navigation').each(function(index,element){
  var me = $(this);
  $(element).replace(function(){
     return "<a href='your reference here'>"+me.text+"</a>"
  })
})

【讨论】：