在每个列表元素中插入一个链接标记

Insert a link tag into each list element

本文关键字：一个 链接 列表元素 插入      更新时间：2023-09-26

我想在每个ul元素的两个列表项之间插入一个链接。目前，我的代码只在最后一个ul元素中插入链接。

<html>
<div class="list">
   <ul>
      <li>what</li>
      <li>now</li>
   </ul>
</div>
<div class="list">
   <ul>
      <li>what</li>
      <li>now</li>
   </ul>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  var tag = document.createElement("A")
  var linkedTag = tag.setAttribute('href', '/');
  tag.innerHTML = "UP"
  $('.list').each(function(i, obj) {
    var one = obj.childNodes[1];
    one.insertBefore(tag, one.childNodes[2])
  });
</script>
</html>

使用jQuery有一种更简单的方法

$('.list').append(function() {
    return $('<a>', { href : '/', text : 'UP' })
});

你的代码不工作的原因，是因为你只创建了一个锚，并移动了它，所以它最终在它最后被移动到的地方。

还要注意，直接在UL中插入锚点是无效的标记，正如您所做的那样。如果您想在每个UL之前放置一个锚点，您可以使用

$('.list ul').prepend(function() {
    return $('<a>', { href : '/', text : 'UP' })
});

如果你想要锚点在两个已经存在的LI元素之间，你必须把锚点也包裹在LI元素中

$('.list ul li:first-child').after(function() {
    return $('<li>', {
        html : $('<a>', { href : '/', text : 'UP' })
    });
});

小提琴

相关文章：