用 a 標簽包裝 span 標簽，其 href 目標與 span 的文本相同

Question

我的文檔有許多跨度標簽，如下所示：

<span class='myClass'>aaa</span>

我想將它們中的每一個變成以下內容：

<a href="http://www.example.com/aaa" onclick="myfunc();"><span class='myClass'>aaa</span></a>

有沒有辦法做到這一點？ 可以是純 js 或 jquery (3.1.1)

先感謝您

Answer 1

用這個：

const els=document.querySelectorAll("span.myClass");
els.forEach((el)=>{
   const t=el.textContent;
   const aEl=document.createElement("a");
   aEl.href=`http://example.com/${t}`;
   aEl.appendChild(el.cloneNode(true))
   el.parentElement.insertBefore(aEl,el);
   el.remove()
})

Answer 2

使用 jQuery，您可以使用.each()迭代所有.myClass元素，然后使用.wrap()包裝它們

 $(".myClass").each( function() { $(this).wrap('<a href="http://www.example.com/' + $(this).text() + '" onclick="myfunc();" />'); }); console.log($(".myClass").parent())

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <span class='myClass'>aaa</span> <span class='myClass'>bbb</span> <span class='myClass'>ccc</span> <span class='myClass'>ddd</span>

https://api.jquery.com/wrap/