如何从锚标记中提取 href 值并作为文本插入？

Question

如果我有 html 代码：<a href="google.com" class='link'>hi</a>如何提取 href 值并将其添加为文本：<a href="google.com" class='link'>hi google.com</a>我看过很多关于提取 href 值的帖子，但我不确定如何将其作为文本插入。谢谢你。

Answer 1

你可以这样做：

$('.link').text(function() {

  return $(this).text() + " " + $(this).attr("href");

})

演示

$('.link').text(function() {

  return $(this).text() + " " + $(this).attr("href");

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="google.com" class='link'>hi</a>

Answer 2

你也可以用这个

$('input:button').click(function(){

      var h = $('.link').attr('href');

      var t = $('.link').text();

      $('.link').text(t+' '+h);

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="google.com" class='link'>hi</a>

 <input type="button" value="push"></button>

Answer 3

您可以使用jquery text功能

$('.link').text(function(a) {

  return $(this).text().trim() + ',' + $(this).attr('href')

})

a {

  text-decoration: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="google.com" class='link'>hi</a>

使用本机 javascript，您可以使用document.querySelectorAll公共类获取元素并遍历它们并更新文本

document.querySelectorAll('.link').forEach((e) => {

  e.textContent = e.textContent + ' , ' + e.getAttribute('href')

})

<a href="google.com" class='link'>hi</a>